<template>
	<Row>
		<!-- <h4 style="margin-bottom: 10px">历史学习记录</h4> -->
		<Col span="18" style="">
		<div class="home-top">
			<div class="middle-right">
				<div style="display: flex;justify-content: space-between;">
					<span style="color: var(--default-color);font-size: 18px;font-weight: 600;">竞争力分析</span>
					<div style="font-size:14px;color: var(--home-competitive-sum-color);">综合评分
						<span> {{totals}} </span>，超过
						<span> {{per}}% </span>的用户
					</div>
				</div>
				<div id="competitive"></div>
			</div>
      <div class="study-data-wrap">
        <div class="study-data-wraps">
          <div class="study-data">
            <div class="study-num">
              <img :src="homeScoreImage" alt="">
              <span>
								{{this.integralDetail.userIntegral||0}}
							</span>
            </div>
            <div class="study-text">积分</div>
          </div>
          <div class="study-data">
            <div class="study-num">
              <img :src="homeScoreNameImage" alt="">
              <span>
								{{this.integralDetail.rank||1}}
							</span>
            </div>
            <div class="study-text">积分名次</div>
          </div>
          <div class="study-data">
            <div class="study-num">
              <img :src="homeLearnedExpImage" alt="">
              <span style="cursor: pointer;color:var(--url-color)" @click="showDrawer(2)">
								{{this.allExpCount}}
							</span>
            </div>
            <div class="study-text">{{$t('完成自学')}}</div>
          </div>
          <!--            <div class="study-data">-->
          <!--              <div class="study-num">-->
          <!--                <img :src="homeLearnedCourseImage" alt="">-->
          <!--                <span style="cursor: pointer; color:var(&#45;&#45;url-color)" @click="showDrawer(1)">{{this.allCourseCount}}</span>-->
          <!--              </div>-->
          <!--              <div class="study-text">{{$t('Lessonslearned')}}</div>-->
          <!--            </div>-->
          <!--<div class="study-data">
                          <div class="study-num">
                              <img src="../../assets/mainImage/已学视频.png" alt="">
                              <span>
                                  {{this.videoLookedNum}}
                              </span>
                          </div>
                          <div class="study-text">{{$t('WatchedVideo')}}</div>
                      </div>-->
          <div class="study-data">
            <div class="study-num">
              <img :src="homePitchExamImage" alt="">
              <span style="cursor: pointer;color:var(--url-color)" @click="showDrawer(3)">
								{{this.joinedExam.length}}
							</span>
            </div>
            <div class="study-text">{{$t('参加考试')}}</div>
          </div>
          <div class="study-data">
            <div class="study-num">
              <img :src="homeLearnedCourseImage" alt="">
              <span style="cursor: pointer;color:var(--url-color)" @click="showDrawer(6)">
								{{this.allClassCount}}
							</span>
            </div>
            <div class="study-text">{{$t('参与上课')}}</div>
          </div>
          <div class="study-data">
            <div class="study-num">
              <img :src="homeLearningDurationlImage" alt="">
              <span>
								<!-- click="showDrawer(5)" -->
								{{learnedDuration}}
							</span>
            </div>
            <div class="study-text">总学习时长（h）</div>
          </div>

          <div class="study-data study-honor">
            <div class="study-num">
              <!-- <img src="../../assets/homerImage/level-icon.png" alt=""> -->
              <!-- <div style="background: #C81125;border-radius: 16px;">初级一级</div> -->
              <img :src="getMedal(integralDetail.userIntegralMedalNum)" alt="">
              <p :title="integralDetail.userIntegralMedalNum | medalNumFilter">
                {{integralDetail.userIntegralMedalNum | medalNumFilter}}
              </p>
            </div>
            <div class="study-text">荣誉勋章</div>
          </div>
        </div>
      </div>
		</div>
		<div class="home-middle">
			<Row style="margin-top: 20px">
				<Col span="24">
				<div class="middle-left" id="homer_Middle">
					<div class="my-flex">
						<div class="my-col col-2">
							<span class="title" style="position: absolute;">统计视图</span>
							<div  id="statistical"></div>
						</div>
						<div class="my-col col-2">
							<span class="title" style="position: absolute;">能力积分</span>
							<div  id="integral"></div>
						</div>
					</div>
					<div class="my-flex">
						<div class="my-col col-2">
							<span class="title" style="position: absolute;">学习覆盖程度</span>
							<div  id="process"></div>
						</div>
            <div class="my-col col-2" v-show="hasExam">
              <!-- <span class="title" style="">考试成绩</span> -->
              <div class="mygrades">
                <span class="title">考试成绩</span>
                <!-- <div style="color: #333;font-size: 20px;font-weight: 600"></div> -->
                <div style="color: #999">
                  <Badge status="processing" text="我的分数" style="margin-right:10px;"/>
                  <Badge status="warning" text="平均分数" />
                </div>
              </div>
              <div v-show="showKnowCon" id="grade"></div>
              <div v-show="showKnowImg" class="defGraphWrap-nodata">
                <div class="defGraph" :style="{ 'background-image': `url(${noDataImage})` }"></div>
                <div class="graphText">暂无数据</div>
              </div>
            </div>

					</div>
					<div class="my-flex" v-if="false">
						<!-- :style="{height: showKnowCon ? '':'614px'}" -->
            <div class="my-col col-2">
              <span class="title" style="position: absolute;">技能树学习程度</span>
              <div  id="skilltree"></div>
            </div>
						<div class="my-col col-2" v-for="item in useDrillAndCompete" v-show="item.show" :key="item.name">
							<span class="title">{{item.title}}</span>
							<div v-show="item.showKnowCon2" :id="item.name"></div>
							<div v-show="item.showKnowImg2" class="defGraphWrap-nodata">
								<div class="defGraph" :style="{ 'background-image': `url(${noDataImage})` }"></div>
								<div class="graphText">暂无数据</div>
							</div>
						</div>
					</div>
					<Button type="success" class="more" @click="moreEchart" v-if="useDrillAndCompete.length > 3">
						<div class="flex-btn-img">
							<div style="margin-right:3px">{{!moreFlag ? '更多' : '收起'}}</div>
						<img src="../../assets/exper/type-down1.png" alt="" v-if="!moreFlag"/>
						<img src="../../assets/exper/type-up1.png" alt="" v-if="moreFlag"/>
						</div>
					</Button>
				</div>
				</Col>
			</Row>
		</div>
		</Col>
		<Col span="6" style="padding-left: 25px;display: flex;flex-direction: column;overflow: hidden;position: sticky;
		top: 30px;">
			<div class="dark-bg" style="margin-bottom:20px;">
				<div class="calendar">
					<div class="calendar-title">
						<div class="value">
							<span class="month">{{ monthValue }}</span>
							<span class="year">{{ calendar.year }}</span>
						</div>
						<ul class="handle clearfix">
							<li @click="setPrevMonth">
								<Icon type="ios-arrow-back" />
							</li>
							<li class="current" @click="setCurrentDate">当前</li>
							<li @click="setNextMonth">
								<Icon type="ios-arrow-forward" />
							</li>
						</ul>
					</div>
					<div class="calendar-content">
						<table>
							<thead>
								<th>日</th>
								<th>一</th>
								<th>二</th>
								<th>三</th>
								<th>四</th>
								<th>五</th>
								<th>六</th>
							</thead>
							<tbody>
								<tr v-for="index in calendarValue.rows" :key="index">
									<td v-for="(item, idx) in calendarValue.data.slice(
												(index - 1) * calendar.weekday,
												index * calendar.weekday
											)" :key="idx">
										<div class="date" style="cursor: pointer" :class="getCalendarClass(item[0], item[1])"
											@click="changeCalendarDate(item[0])">
											{{ item[1].date }}
										</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<div class="task-list">
					<template v-if="eventList.length > 0">
						<!--  // 0.培训 3.演练 2.竞赛 1.考试 -->
						<div class="task-item flex" v-for="event in eventList" :key="event.id">
							<div class="task-item-icon flex-center" :class="handleType(event.type, 'name')">
								<img :src="handleType(event.type, 'icon')()"
									style="filter: grayscale(100%) brightness(200%);" />
							</div>
							<div class="task-item-info">
								<p class="task-item-name text-ellipsis">
									{{ event.name }}·{{ handleType(event.type, 'txt') }}
								</p>
								<p class="task-item-time text-ellipsis">
									{{ event.startTime }} -
									{{ event.endTime }}
								</p>
							</div>
							<div class="task-item-status" :class="filterStatus(event.status, event.type, 'class')">
								{{ filterStatus(event.status, event.type, 'txt') }}
							</div>
						</div>
					</template>
					<template v-else>
						<!-- <NoData></NoData> -->
						<div class="defGraphWrap-nodata">
							<div class="defGraph" :style="{ 'background-image': `url(${noDataImage})` }"></div>
							<div class="graphText">暂无数据</div>
						</div>
					</template>
				</div>
			</div>
			<div class="home-task" v-if="false">
				<div class="filter">
					<span class="read" @click="setChatAllRead">
							<!--<img :src="clear" alt="" @hover="hoverClear"/>
							<!-- <span class="img"></span> --> 全部标为已读
					</span>
					<Select filterable v-model="queryBoardInfo.lookStatus" placeholder="全部" style="width:150px;text-align: left;" @on-change="changeStatus">
						<Option value=''>全部</Option>
						<Option :value='1'>已读</Option>
						<Option :value='0'>未读</Option>
					</Select>
				</div>
				<!-- 公告List -->
				<div class="noticelistbox">
					<div class="noticelist">
						<div v-if="boardData.length==0" class="defGraphWrap-nodata">
							<div class="defGraph" :style="{ 'background-image': `url(${noDataImage})` }"></div>
							<div class="graphText">暂无数据</div>
						</div>
						<div class="listContend" v-for="(i,index) in boardData" :key="index">
							<!-- <div class="imgstate">
								<div v-if="i.lookStatus==1">
									<img src="../../assets/mainImage/state1.png" alt="">
									<div>已读</div>
								</div>
								<div v-else>
									<img src="../../assets/mainImage/state0.png" alt="">
									<div>未读</div>
								</div>
							</div> -->
							<div class="task-item-status" :style="{background:i.lookStatus==1 ? '#768192':'#C49000'}">
								{{ i.lookStatus==1 ? '已读' : '未读' }}
							</div>
							<div class="listRigth">
								<div>
									<span>类型&#12288;&#12288;:</span>
									<div>事务公告</div>
								</div>
								<div style="position: relative;">
									<span>内容&#12288;&#12288;:</span>
									<div class="listNoticeContent text-ellipsis html-ellipsis">
										<span v-if="i.type==1&&index<3" style="background:#1563C2" class="new">新</span>
										<div class="table-content" @click="lookcontend(i)" v-html="i.noticeMsg && i.noticeMsg.content"></div>
										<!-- <img v-if="i.type==1&&index<3" src="../../assets/mainImage/new.png" alt=""> -->
									</div>
								</div>
								<div>
									<span>发送者&#12288;:</span>
									<div>{{i.senderName}}</div>
								</div>
								<div>
									<span>发送时间:</span>
									<div>{{i.sendTime}}</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 分页 -->
					<div v-if="!boardData.length==0" class="page" style="margin:10px 0">
						<Page size="small" simple show-elevator :total="boardCount" :current="queryBoardInfo.pageIndex"
						:page-size="queryBoardInfo.pageSize" style="text-align: center;" @on-change="change" />
					</div>
				</div>
			</div>
		</Col>
		<DrawerPage
			:title="drawerTitle"
			width="900"
			v-model="drawerVal"
			class-name="high-level-drawer"
			:columns="columns"
			:data="drawerData.list"
			:page.sync="drawerQuery.pageIndex"
			:size.sync="drawerQuery.pageSize"
			:total="drawerData.total"
			@queryFun="getDataList(currentType)"
			>
			<Alert type="warning" show-icon v-if="[4, 5].includes(currentType)">
				未进行积分计算的{{currentType === 4 ? '竞赛' : '演练'}}，无法展示积分与排名
			</Alert>
			<!-- <Table highlight-row :columns="columns" :data="drawerData.list" border :loading="loadingTable"></Table>
			<Page :total="drawerData.total" show-elevator showTotal style="text-align: right; margin-top: 10px;"
				:current="drawerQuery.pageIndex"
				:page-size="drawerQuery.pageSize"
				@on-change="changePage"
				v-if="drawerData.total > 0"/> -->
		</DrawerPage>
		<Modal v-model="modal" :title="curNotice.title" footer-hide>
			<div v-html="curNotice.content" style="font-size:14px;" class="noticeContent ql-editor">

			</div>
		</Modal>
	</Row>
</template>
<script>
	import $ from 'jquery'
	import G2 from '@antv/g2'
	import DataSet from '@antv/data-set';
	import { Chart } from '@antv/g2';
	import * as utils from '@/libs/utils.js';
	import { TimeFormatter,formatDate } from '@/libs/utils.js';
	// import {echartData} from './index.js'
	import Img from '@/assets/baseInfo/defult.jpg'
	import {
		getUserExam,
		getRourse,
    getCompetStaticNew,
		getCompetStatic,
		getMyExamGrade,
		statisticsExp,
		statisticsDrillAndRace,
		getAllScore,
		getPrjList,
		getCompositeScoreList,
		getTaskExperList,
    getIntegralDetail1,
    queryExperimenterCourse1,
    getClassCount
	} from '@/api/experimenterTrack.js';
	import {
		getCourseStatistics,
		getExpStatistics,
		getExamStatistics,
		getSceneStatistics
	} from '@/api/excellentStudent';
	import { getStatisticsData, queryStudentIntegral, querySkillTreeCovered } from '@/api/homer';
	import moment from 'moment'
	import cookieUse from '@/libs/cookie.js'
	import {
		mapGetters,
		mapActions,
		mapState
	} from 'vuex'
export default {
		data() {
			let today = new Date();
			// let {
			// 	year,
			// 	month,
			// 	day
			// } = utils.getNewDate(new Date());
			return {
        allClassCount:0,
				today,
				USER_ID: this.$route.query.id,
				nickname: this.$route.query.name,
				USER_NAME: this.$route.query.username,
				defaultImg:Img,
				currentType: 1,
				columns: [
					{
						title:'课程名称',
						key:'name',
						tooltip:true,
					},
					{
						title:'难度',
						key:'difficulty',
						tooltip:true,
						render:(h,params) => {
							let difficulty = params.row.difficulty
							let obj = utils.parseDifficulty(difficulty)
							return h('span', {
								style: {
									color: obj.color
								}
							}, obj.text)
            			}
					},
					{
						title:'基础分',
						key:'basicScore',
						tooltip:true,
					},
					{
						title:'奖励分',
						key:'rewardScore',
						tooltip:true,
					},
					{
						title:'学习状态',
						key:'studyStatus',
						tooltip:true,
					}
				],
				loadingTable: false,
				drawerVal: false,
				medal0: require("./integral-new/level-1.png"),
				medal1: require("./integral-new/level-1.png"),
                medal2: require("./integral-new/level-2.png"),
                medal3: require("./integral-new/level-3.png"),
                medal4: require("./integral-new/level-4.png"),
                medal5: require("./integral-new/level-5.png"),
                medal6: require("./integral-new/level-6.png"),
                medal7: require("./integral-new/level-7.png"),
                medal8: require("./integral-new/level-8.png"),
                medal9: require("./integral-new/level-9.png"),
                medal10: require("./integral-new/level-10.png"),
				modal: false,
				curNotice: {
					title: '',
					content: ''
				},
				// 我的公告list数据
				boardData: [],
				// list参数
				queryBoardInfo: {
					pageIndex: 1,
					pageSize: 3,
					lookStatus: '',
					receiver: ''
				},
				boardCount: 0,
				fullHeight: document.documentElement.clientHeight,
				leftHei: '0px',
				taskHei: '0px',
				classBool: true,
				expBool: false,
				videoBool: false,
				visiblePop: false,
				// 参与的考试
				joinedExam: [],
				// 已学课程
				allCourseCount: 0,
				// 已学课件
				allExpCount: 0,
				//已参加竞赛
				allRaceCount: 0,
				//已参加的演练
				allDillCount: 0,
				// 已看视频
				videoLookedNum: 0,
				// 学习总时长
				learnedDuration:0,
				// 左下角占比
				total: 0,
				learned: 0,
				proportion: 0,
				tabsName: 'course',
				// 日历
				calendarTitleArr: [
					'一',
					'二',
					'三',
					'四',
					'五',
					'六',
					'日',
				],
				calendarList: [],
				todeyNum: '',
				yearNum: '',
				// 考试任务列表
				surfaceTaskList: [],
				taskType: '0',
				queryType: 0,
				queryStime: '',
				queryEtime: '',
				// 考试成绩图表数据
				examChartData: [],
				examChart: '',
				// 无数据默认图片
				showDefImg: false,
				showRightTaskList: false,
				per: 0,
				totals: 0,
				totalExp: 0,
				totalCourse: 0,
				// 第一个图
				showKnowCon: false,
				showKnowImg: false,
				showKnowImg2: false,
				showKnowCon2: false,
				showKnowImg3: false,
				showKnowCon3: false,
				ws: {},
				// 参与的训练
				trainNum: 0,

				// 夺旗赛和知识赛成绩图
				knowData: [],
				integralDetail: {},
				//学习曲线Map
				studyCurveMap:{
						"course": false,
						"experiment": false,
						"examination": false,
						"drill": false,
						"contest": false
				},
				//积分
				integralStatisticsList:[],
				skillTreeCoveredList:[],
				exptypeList:[],
				exptotal:0,
				drawerQuery: {
					pageIndex: 1,
					pageSize: 10
				},
				drawerData: {
					list: [],
					total: 0
				},
				// 0培训，1考试，2竞赛，3演练
                type: {
                    0: {
                        txt: '培训',
                        name: 'train',
                        // icon: trainImg
                        icon: () => {
                            return this.homeLessonImage;
                        }
                    },
                    1: {
                        txt: '考试',
                        name: 'exam',
                        // icon: examImg,
                        icon: () => {
                            return this.designHomeExamImage;
                        }
                    },
                    2: {
                        txt: '竞赛',
                        name: 'compete',
                        // icon: competeImg,
                        icon: () => {
                            return this.homeCompeteImage;
                        }
                    },
                    3: {
                        txt: '演练',
                        name: 'drill',
                        // icon: drillImg,
                        icon: () => {
                            return this.homeDrillImage;
                        }
                    }
                },
                status: {
                    train: {
                        0: {
                            txt: '未开始',
                            class: 'wait'
                        },
                        1: {
                            txt: '进行中',
                            class: 'process'
                        },
                        2: {
                            txt: '已结束',
                            class: 'end'
                        }
                    },
                    compete: {
                        0: {
                            txt: '准备中',
                            class: 'wait'
                        },
                        2: {
                            txt: '进行中',
                            class: 'process'
                        },
                        4: {
                            txt: '已结束',
                            class: 'end'
                        },
                        5: {
                            txt: '暂停',
                            class: 'pause'
                        }
                    },
                    drill: {
                        0: {
                            txt: '准备中',
                            class: 'wait'
                        },
                        2: {
                            txt: '进行中',
                            class: 'process'
                        },
                        4: {
                            txt: '已结束',
                            class: 'end'
                        },
                        5: {
                            txt: '暂停',
                            class: 'pause'
                        },
						6:{
							txt:'删除中',
							class: 'end'
						},
						7:{
							txt: '删除失败',
                            class: 'end'
						}
                    },
                    exam: {
                        0: {
                            txt: '未开始',
                            class: 'wait'
                        },
                        2: {
                            txt: '进行中',
                            class: 'process'
                        },
                        1: {
                            txt: '已结束',
                            class: 'end'
                        },
                        3: {
                            txt: '已结束',
                            class: 'end'
                        }
                    }
                },
                calendar: {
                    year: today.getFullYear(),
                    month: today.getMonth(), // 显示月-1
                    date: today.getDate(),
                    weekday: 7,
                    state: {},
                    check: TimeFormatter.ydm(today.getTime()),
                    first: '',
                    last: ''
                },
                eventList: [],
				moreFlag: false,
			}
		},
		filters: {
			medalNumFilter(num) {
                if (num > 10) {
                    num = 10
                }
                switch (num) {
					case 0 : return '新手'
                    case 1 : return '初级一级'
                    case 2 : return '初级二级'
                    case 3 : return '初级三级'
                    case 4 : return '初级四级'
                    case 5 : return '中级一级'
                    case 6 : return '中级二级'
                    case 7 : return '中级三级'
                    case 8 : return '高级一级'
                    case 9 : return '高级二级'
                    case 10 : return '特级'
                    default: return
                }
            },

		},
		computed: {
			// ...mapState('board_new', ['notReadCount']), //未读消息数
			...mapState(['currentTime']),
			...mapGetters(['hasTrain','hasExam','hasCtf','hasST','hasKnowledge','hasAWD','hasHWD','hasAWDPlus','hasYWC','hasAWC','hasZH','hasYJ','showDrillAndCompete']),
			...mapState('style', {
                homeCompeteImage: ({ themeConfig }) => {
                    return themeConfig.homeCompeteImage;
                },
                homeLessonImage: ({ themeConfig }) => {
                    return themeConfig.homeLessonImage;
                },
                homeDrillImage: ({ themeConfig }) => {
                    return themeConfig.homeDrillImage;
                },
                designHomeExamImage: ({ themeConfig }) => {
                    return themeConfig.designHomeExamImage;
                },
                homeCompeteChartColor: ({ themeConfig }) => {
                    return [themeConfig.homeCompeteChartColor];
                },
                homeDrillChartColor: ({ themeConfig }) => {
                    return [themeConfig.homeDrillChartColor];
                },
                homeTrainChartColor: ({ themeConfig }) => {
                    return [themeConfig.homeTrainChartColor];
                },
                homeResChartColor: ({ themeConfig }) => {
                    return [themeConfig.homeResChartColor];
                },
								noDataImage: ({ themeConfig }) => {
                	return themeConfig.noDataImage;
            		},
								homeScoreImage: ({ themeConfig }) => {
                  return themeConfig.homeScoreImage;
                },
								homeScoreNameImage: ({ themeConfig }) => {
                  return themeConfig.homeScoreNameImage;
                },
								homeLearnedExpImage: ({ themeConfig }) => {
                  return themeConfig.homeLearnedExpImage;
                },
								homeLearnedCourseImage: ({ themeConfig }) => {
                  return themeConfig.homeLearnedCourseImage;
                },
								homePitchExamImage: ({ themeConfig }) => {
                  return themeConfig.homePitchExamImage;
                },
								homePitchCompeteImage: ({ themeConfig }) => {
                  return themeConfig.homePitchCompeteImage;
                },
								homePitchDrillImage: ({ themeConfig }) => {
                  return themeConfig.homePitchDrillImage;
                },
								homeLearningDurationlImage: ({ themeConfig }) => {
                  return themeConfig.homeLearningDurationlImage;
                },
                defaultColor: ({ themeConfig }) => {
                    return themeConfig.defaultColor;
                },
            }),
			useDrillAndCompete(){
				return this.showDrillAndCompete
			},
            calendarValue() {
                let prev = this.getPrevMonthDate(),
                    current = this.getCurrentMonthDate(),
                    next = this.getNextMonthDate(),
                    data = [...prev, ...current, ...next],
                    l = data.length;
                this.calendar.first = data[0][0];
                this.calendar.last = data[l - 1][0];
                return {
                    data,
                    rows: l / this.calendar.weekday
                };
            },
            monthValue() {
                let vals = [
                    // "Jan",
                    // "Feb",
                    // "Mar",
                    // "Apr",
                    // "May",
                    // "Jun",
                    // "Jul",
                    // "Aug",
                    // "Sept",
                    // "Oct",
                    // "Nov",
                    // "Dec",
                    '一月',
                    '二月',
                    '三月',
                    '四月',
                    '五月',
                    '六月',
                    '七月',
                    '八月',
                    '九月',
                    '十月',
                    '十一月',
                    '十二月'
                ];
                return vals[this.calendar.month];
            },
			drawerTitle() {
				switch(this.currentType) {
					case 1:
						return '已学课程'
					case 2:
						return '已学课件'
					case 3:
						return '参与考试'
					case 4:
						return '参与竞赛'
					case 5:
						return '参与演练'
				}
			}
		},
		watch: {
			notReadCount: function(val) {
				this.getBoardLists();
			},
			currentType(type) {
				switch(type) {
					case 1:
						this.columns = [
							{
								title:'课程名称',
								key:'name',
								tooltip:true,
							},
							{
								title:'难度',
								key:'difficulty',
								tooltip:true,
								render:(h,params) => {
									let difficulty = params.row.difficulty
									let obj = utils.parseDifficulty(difficulty) || {}
									return h('span', {
										style: {
											color: obj.color
										}
									}, obj.text)
								}
							},
							{
								title:'基础分',
								key:'basicScore',
								tooltip:true,
							},
							{
								title:'奖励分',
								key:'rewardScore',
								tooltip:true,
							},
							{
								title:'学习状态',
								key:'studyStatus',
								tooltip:true,
							}
						]
						break
					case 2:
						this.columns = [
							{
								title:'课件名称',
								key:'name',
								tooltip:true,
							},
							{
								title:'课件类型',
								key:'type',
								tooltip:true,
								render:(h,params) => {
									return h('span', {
										style: {
											color: params.row.type === 0 ? '#19be6b' : params.row.type === 1 ? '#2db7f5' : '#ff9900'
										}
									}, params.row.type === 0 ? '实操课件' : params.row.type === 1 ? '理论课件' : '文本课件')
								}
							},
							{
								title:'难度',
								key:'difficulty',
								tooltip:true,
								render:(h,params) => {
									let difficulty = params.row.difficulty
									let obj = utils.parseDifficulty(difficulty)
									return h('span', {
										style: {
											color: obj.color
										}
									}, obj.text)
								}
							},
							{
								title:'基础分',
								key:'basicScore',
								tooltip:true,
							},
							{
								title:'奖励分',
								key:'rewardScore',
								tooltip:true,
							},
							{
								title:'学习状态',
								key:'studyStatus',
								tooltip:true,
							}
						]
						break
					case 3:
						this.columns = [
							{
								title:'考试名称',
								key:'examinationName',
								tooltip:true,
							},
							{
								title:'试卷名称',
								key:'paperName',
								tooltip:true,
							},
							{
								title:'类型',
								key:'type',
								tooltip:true,
								render:(h,params) => {
									return h('span', {
										style: {
											color: params.row.type === 0 ? '#19be6b' : params.row.type === 1 ? '#2db7f5' : '#ff9900'
										}
									}, params.row.type === 0 ? '考试' : params.row.type === 1 ? '自测' : '培训')
								}
							},
							{
								title:'基础分',
								key:'basicScore',
								tooltip:true,
							},
							{
								title:'奖励分',
								key:'rewardScore',
								tooltip:true,
							},
							{
								title:'成绩',
								key:'grade',
								tooltip:true,
								render:(h,params) => {
									let grade = params.row.grade
									return h('span', !grade && grade !== 0 ? '未提交' : grade)
								}
							},
							{
								title:'完成时间',
								key:'endTime',
								tooltip:true,
							},
						]
						break
					case 4:
					case 5:
						this.columns = [
							{
								title: `${type === 4 ? '竞赛' : '演练'}名称`,
								key: 'name',
								tooltip:true,
							},
							{
								title: '积分',
								key: 'personalIntegral',
								tooltip:true,
								render:(h,params) => {
									let personalIntegral = params.row.personalIntegral
									return h('span', !personalIntegral && personalIntegral !== 0 ? '-' : personalIntegral)
								}
							},
							{
								title: '排名',
								key: 'personalRank',
								tooltip:true,
								render:(h,params) => {
									let personalRank = params.row.personalRank
									return h('span', !personalRank && personalRank !== 0 ? '-' : personalRank)
								}
							},
							{
								title: '完成度',
								key: 'rate',
								tooltip:true,
								render:(h,params) => {
									return h('span', `${params.row.rate}%`)
								}
							},
							{
								title: `${type === 4 ? '竞赛' : '演练'}类型`,
								key: 'type',
								tooltip: true,
								render:(h,params) => {
									return h('span', this.parseScene(params.row.type))
								}
							},
							{
								title: '开始时间',
								key: 'startTime',
								tooltip:true,
							},
							{
								title: '结束时间',
								key: 'endTime',
								tooltip:true,
							}
						]
						break
				}
			}
		},
		beforeDestroy() {
			clearTimeout(this.refreshTimer);
			window.removeEventListener('resize', this.setStyle)
		},
		mounted() {
			this.$store.commit('addBreadItem', { name: this.nickname });
			this.queryBoardInfo.receiver = this.USER_ID;
			// 竞赛图
			this.comAllScore()
			this.leftHei = this.fullHeight - 145 + 'px'
			this.taskHei = 1160 - 505 + 'px'
				// 下拉列表变成圆角
			$('.ivu-select-selection').css({
				'border-radius': '20px'
			})
			$('.ivu-divider-horizontal').css({
				margin: '10px 0'
			})
			$('.ivu-tag').css({
				'padding': '0 4px',
				'border-radius': '10px',
				'height': '18px'
			})
			$('.ivu-tag-red').css({
				'line-height': '18px'
			})
			this.calcData()
			var _this = this;
			$('.middle-left .ivu-tabs-nav-prev').click(function(){
				_this.calcData()
			})
			$('.middle-left .ivu-tabs-nav-next').click(function(){
				_this.calcData()
			})

      this.getIntegralDetail();// 积分
      // 参与上课
      this.getClassStatic()
			//竞争力统计图
			this.getCompetStatic();
			//试验知识点
			// this.getExpStatic();
			//我的考试图接口
			this.getMyExamGrade();
			//课件类型饼状图接口
			this.queryExperimentType();
			this.queryStudentIntegral()
			//this.querySkillTreeCovered()
			// 右侧任务
			this.initTaskList()
				// 获取资源：课程和课件
			this.getSourseData()
				//获取竞赛状态推送
				// 参与的训练
			this.getExamList() //参与考试
			//this.getDrillAndRace() //参与竞赛
			// this.drowPolar() //绘制技能雷达图
			// this.integralStatistics()
			// this.drowPropertyLines() //绘制指标曲线
			
			// 日历
			this.renderTrainCalendar();
            this.renderTaskList();
			this.setStyle() // 计算分页大小后，获取场景列表
            window.addEventListener('resize', this.setStyle)
		},
		created() {
			this.calendarList = this.visibleCalendar;
		},
		methods: {
			setStyle() {
				clearTimeout(this.refreshTimer)
                this.refreshTimer = setTimeout(() => {
					let clientHeight = document.documentElement.clientHeight
					let tableHeight = clientHeight - 44 - 51 - 32 - 36 // 整体高度减去分页组件高度、头部高度、留白高度、表头高度
					if ([4, 5].includes(this.currentType)) { // 竞赛、演练，额外减去提示组件高度
						tableHeight -= 44
					}
					this.drawerQuery.pageSize = Math.floor(tableHeight / 48) || 1
					this.changePage(1)
				}, 200)
			},
			filterStatus(status, type, getType) {
                if ((status === 0 || status) && (type === 0 || type) && (getType === 0 || getType)) {
                    return this.status[this.type[type].name][status][getType];
                }
            },
            handleType(type, getType) {
                if ((type === 0 || type) && (getType === 0 || getType)) {
                    return this.type[type][getType];
                    // 0培训，1考试，2竞赛，3演练
                }
            },
			getDateList(start, end) {
                let sd = start.split(' ')[0],
                    te = end.split(' '),
                    // ed = end.split(" ")[0],
                    ed = te[1] === '00:00:00' ? TimeFormatter.ydm(new Date(end).getTime() - 1) : te[0],
                    data = [sd];
                if (sd === ed) return data;
                let st = new Date(sd).getTime(),
                    et = new Date(ed).getTime(),
                    n = (et - st) / 86400000;
                for (let i = 0; i < n; i++) data.push(TimeFormatter.ydm(st + 86400000 * (i + 1)));
                return data;
            },
            changeCalendarDate(date) {
                // if (date in this.calendar.state) {
                this.calendar.check = date;
                this.renderTaskList();
                // }
            },
			 // calendar
			 getMonthStart() {
                let d = new Date(this.calendar.year, this.calendar.month);
                return new Date(d.getFullYear(), d.getMonth(), 1);
            },
            getMonthEnd() {
                let d = new Date(this.calendar.year, this.calendar.month);
                return new Date(d.getFullYear(), d.getMonth() + 1, 0);
            },
            getPrevMonthDate() {
                let data = [],
                    start = this.getMonthStart(this.calendar.year, this.calendar.month),
                    i = start.getDay();
                if (i > 0)
                    while (i--)
                        data.push(this.format(new Date(this.calendar.year, this.calendar.month, -i)));
                return data;
            },
            getCurrentMonthDate() {
                let data = [],
                    end = this.getMonthEnd(this.calendar.year, this.calendar.month),
                    i = end.getDate();
                while (i--)
                    data.unshift(this.format(new Date(this.calendar.year, this.calendar.month, i + 1)));
                return data;
            },
            getNextMonthDate() {
                let data = [],
                    end = this.getMonthEnd(this.calendar.year, this.calendar.month),
                    i = this.calendar.weekday - 1 - end.getDay();
                if (i > 0)
                    while (i--)
                        data.unshift(
                            this.format(new Date(this.calendar.year, this.calendar.month + 1, i + 1))
                        );
                return data;
            },
            setPrevMonth() {
                this.calendar.month === 0
                    ? (this.calendar.year--, (this.calendar.month = 11))
                    : this.calendar.month--;
                this.$nextTick(() => {
                    this.renderTrainCalendar();
                });
            },
            setNextMonth() {
                this.calendar.month === 11
                    ? (this.calendar.year++, (this.calendar.month = 0))
                    : this.calendar.month++;
                this.$nextTick(() => {
                    this.renderTrainCalendar();
                });
            },
            setCurrentDate() {
                let d = this.format(),
                    year = d[1].year,
                    month = d[1].month;
                if (
                    this.calendar.year !== year ||
                    this.calendar.month !== month ||
                    this.calendar.check !== d[0]
                ) {
                    this.calendar.year = year;
                    this.calendar.month = month;
                    this.calendar.check = d[0];
                    this.$nextTick(() => {
                        this.renderTrainCalendar();
                    });
                }
            },
            format(d = new Date()) {
                let year = d.getFullYear(),
                    month = d.getMonth(),
                    date = d.getDate();
                return [
                    `${year}-${formatDate(month + 1)}-${formatDate(date)}`,
                    {
                        year,
                        month,
                        date
                    }
                ];
            },
            getCalendarClass(sDate, oDate) {
                let data = [];
                if (oDate.year === this.calendar.year && oDate.month === this.calendar.month) {
                    data.push('current-month-date');
                } else {
                    data.push(
                        this.calcDate(oDate.year, oDate.month) <
                            this.calcDate(this.calendar.year, this.calendar.month)
                            ? 'prev-month-date'
                            : 'next-month-date'
                    );
                }
                this.today.getFullYear() === oDate.year &&
                    this.today.getMonth() === oDate.month &&
                    this.today.getDate() === oDate.date &&
                    data.push("today");
                sDate in this.calendar.state && data.push('value');
                sDate === this.calendar.check && data.push('focus');
                return data;
            },
            calcDate(year, month, date = 1) {
                return new Date(year, month, date).getTime();
            },
			renderTaskList() {
                let params = {
					userId:this.USER_ID,
                    startTime: `${this.calendar.check} 00:00:01`,
                    endTime: `${this.calendar.check} 23:59:59`
                };
				this.eventList = [];
                getTaskExperList(params).then((data) => {
                    // 0.培训 3.演练 2.竞赛 1.考试
                    this.eventList = data.data.taskList;
                });
            },
			// 培训列表
            renderTrainCalendar() {
                let params = {
					userId:this.USER_ID,
                    startTime: `${this.calendar.first} 00:00:00`,
                    endTime: `${this.calendar.last} 23:59:59`
                };
                getTaskExperList(params).then((data) => {
                    let o = {};
                    data.data.taskList.forEach((item) => {
                        this.getDateList(item.startTime, item.endTime).forEach(
                            (item) => (o[item] = !0)
                        );
                    });
                    this.calendar.state = o;
                    this.changeCalendarDate(this.calendar.check);
                });
            },
			parseScene(type) {
				switch(Number(type)) {
					case 0: return '对抗演练'
					case 1: return '攻防赛'
					case 2: return '夺旗赛'
					case 3: return '知识赛'
					case 4: return '渗透演练'
					case 5: return '护网演练'
					case 6: return '应急防御演练'
					case 7: return '综合演练'
					case 8: return '攻防赛plus'
					case 9: return '运维赛'
				}
			},
			changePage(page) {
				this.drawerQuery.pageIndex = page || 1
				this.getDataList(this.currentType)
			},
			getCourseStatistics() {
				this.loadingTable = true
				getCourseStatistics({
					userId: this.USER_ID,
					page: this.drawerQuery.pageIndex,
					rows: this.drawerQuery.pageSize
				}).then(({ code, message,attribute = {} }) => {
					if (code !== 1) {
						this.$Message.warning(message)
						this.drawerData.list = []
						this.drawerData.total = 0
						return
					}
					this.drawerData.list = attribute.dataList || []
					this.drawerData.total = attribute.totalCount || 0
				}).catch(() => {
					this.$Message.error('查询已学课程详情异常')
				}).finally(() => {
					this.loadingTable = false
				})
			},
			getExpStatistics() {
				this.loadingTable = true
				getExpStatistics({
					userId: this.USER_ID,
					pageIndex: this.drawerQuery.pageIndex,
					pageSize: this.drawerQuery.pageSize
				}).then(({ attribute = {},code, message }) => {
					if (code !== 1) {
						this.$Message.warning(message)
						this.drawerData.list = []
						this.drawerData.total = 0
						return
					}
					this.drawerData.list = attribute.dataList || []
					this.drawerData.total = attribute.totalCount || 0
				}).catch(() => {
					this.$Message.error('查询已学课件详情异常')
				}).finally(() => {
					this.loadingTable = false
				})
			},
			getExamStatistics() {
				this.loadingTable = true
				getExamStatistics({
					userId: this.USER_ID,
					page: this.drawerQuery.pageIndex,
					rows: this.drawerQuery.pageSize
				}).then(({ attribute = {},code, message }) => {
					if (code !== 1) {
						this.$Message.warning(message)
						this.drawerData.list = []
						this.drawerData.total = 0
						return
					}
					this.drawerData.list = attribute.dataList || []
					this.drawerData.total = attribute.totalCount || 0
				}).catch(() => {
					this.$Message.error('查询参与考试详情异常')
				}).finally(() => {
					this.loadingTable = false
				})
			},
			getSceneStatistics(type) { // competition: 竞赛  drill: 演练
				this.loadingTable = true
				getSceneStatistics({
					userId: this.USER_ID,
					pageIndex: this.drawerQuery.pageIndex,
					pageSize: this.drawerQuery.pageSize,
					type: type === 'competition' ? 0 : 1
				}).then(({ data = {},code, message }) => {
					if (code !== 1) {
						this.$Message.warning(message)
						this.drawerData.list = []
						this.drawerData.total = 0
						return
					}
					this.drawerData.list = data.items || []
					this.drawerData.total = data.total || 0
				}).catch(() => {
					this.$Message.error(`查询参与${type === 'competition' ? '竞赛' : '演练'}详情异常`)
				}).finally(() => {
					this.loadingTable = false
				})
			},
			showDrawer(type) { // 1课程 2课件 3考试 4竞赛 5演练
				this.drawerVal = true
				this.currentType = type
				this.changePage(1)
			},
			getDataList(type) {
				switch(type) {
					case 1:
						this.getCourseStatistics()
						break
					case 2:
						this.getExpStatistics()
						break
					case 3:
						this.getExamStatistics()
						break
					case 4:
						this.getSceneStatistics('competition')
						break
					case 5:
						this.getSceneStatistics('drill')
						break
				}
			},
			getMedal(num) {
                if (num > 10) {
                    num = 10 // 最高只有十个等级
                }
                switch (num) {
                    case 1 : return this.medal1
                    case 2 : return this.medal2
                    case 3 : return this.medal3
                    case 4 : return this.medal4
                    case 5 : return this.medal5
                    case 6 : return this.medal6
                    case 7 : return this.medal7
                    case 8 : return this.medal8
                    case 9 : return this.medal9
                    case 10 : return this.medal10
                    default: return this.medal0
                }
            },

      getClassStatic(){
        
        getClassCount({userId: this.USER_ID}).then(({ code, message, data = {} }) => {
          
          if (code !== 1) {
            this.$Message.warning(message)
            return
          }
          this.allClassCount = data || 0
         
        })
      },
      getClassList(){

        queryExperimenterCourse1({
          userId: this.USER_ID,
          pageIndex: this.drawerQuery.pageIndex,
          pageSize: this.drawerQuery.pageSize,
        }).then(({ data = {} }) => {
          let { code, message } = data
          if (code !== 1) {
            this.$Message.warning(message)
            return
          }
          this.drawerData.list = data.data.items || []
          this.drawerData.total = data.data.total || 0

         


        })
      },
			getIntegralDetail() {
              
              getIntegralDetail1(this.USER_ID).then((res) => {
                this.integralDetail = {
                  userIntegral:res.userIntegral,
                  userIntegralMedalNum:res.userIntegralMedalNum,
                  rank:res.rank,
                }
           

              })
            },
			setCss(flag){
				//左边禁用
				if(flag=='left'){
					$('.middle-left .ivu-tabs-nav-prev').css({
						'cursor': 'not-allowed'
					})
					$('.middle-left .ivu-tabs-nav-next').css({
						'cursor': 'auto'
					})
				}
				//右边禁用
				else if(flag=='right'){
					$('.middle-left .ivu-tabs-nav-next').css({
						'cursor': 'not-allowed'
					})
					$('.middle-left .ivu-tabs-nav-prev').css({
						'cursor': 'auto'
					})
				}
				else{
					//都不禁用
				$('.middle-left .ivu-tabs-nav-prev').css({
						'cursor': 'auto'
				})
				$('.middle-left .ivu-tabs-nav-next').css({
						'cursor': 'auto'
				})
				}
			},
			calcData(){
				var that = this
				const innerW = $(".ivu-tabs-nav").css('width');
				const scrollW = $(".ivu-tabs-nav-scroll").css('width');
				setTimeout(() => {
						const translates = $(".ivu-tabs-nav").css('transform');
						if (!translates) {
							return
						}
						const transformX = parseFloat(translates.substring(7).split(',')[4]) || 0;
						const minus = parseInt(innerW) - parseInt(scrollW)
						if(transformX == 0){
							that.setCss('left');
						}
						else if(-minus == transformX){
							that.setCss('right')
						}
						else{
							that.setCss()
						}
					},100)
			},
			change(page) {
				this.queryBoardInfo.pageIndex = page;
				this.getBoardLists();
			},
			changeStatus(status) {
				if(status == undefined) {
					return;
				}
				this.queryBoardInfo.pageIndex = 1;
				this.queryBoardInfo.lookStatus = status;
				this.getBoardLists();
			},
			setChatAllRead() {
				setChatAllRead().then(data => {
					if(data.code == 1) {
						this.getBoardListNotRead();
						this.getBoardLists();
					}
				})
			},
			//获取参与演练和竞赛的数量接口
			getDrillAndRace() {
				statisticsDrillAndRace(this.USER_ID).then(data => {
					if(data.code === 1) {
						this.allDillCount = data.attribute.drillSceneSum;
						this.allRaceCount = data.attribute.contestSceneSum
					}
				})
			},
			//获取我的考试成绩接口
			getMyExamGrade() {
				let _this = this;
				getMyExamGrade({ userId: this.USER_ID }).then(data => {
					if(data.code === 1) {
						let dataList = data.attribute.data;
						dataList.forEach(item => {
							_this.examChartData.push({
								time: item.startTime,
								type: '我的分数',
								tem: item.grade,
								name:item.examinationName||'-'
							})
							_this.examChartData.push({
								time: item.startTime,
								type: '平均分数',
								tem: item.avgScore,
								name:item.examinationName||'-'
							})
							// _this.examChartData.push({
							// 	time: item.startTime,
							// 	type: '考试名称',
							// 	tem: item.examinationName,
							// })
						})
						if(dataList.length === 0) {
							this.showKnowImg = true
							this.showKnowCon = false
						} else {
							_this.chart1()
							this.showKnowImg = false
							this.showKnowCon = true
						}
					}
				})
			},
			queryExperimentType(){
				getStatisticsData({ userId: this.USER_ID }).then(({data:{ code,data = {},message }})=>{
					if (code === 1) {
						let list = data || []
						let sum = 0
						list.forEach(item => {
							sum += item.totalScore
						})
						let maxPercent
						let sumPercent = 0
            this.exptypeList=[]
            list.forEach(item => {
              let iitem = this.dataTypeFilter(item.dataType)
              if(iitem){
                item.item = iitem
                let percent = Number((item.totalScore / sum).toFixed(4))
                maxPercent = maxPercent === undefined ? Math.max(0, percent) : Math.max(maxPercent, percent)
                sumPercent += percent
                item.percent = percent
                this.exptypeList.push(item)
              }
              // return item
            })
						if (sumPercent !== 0) { // 均不为0，计算最终四舍五入的结果的误差，并由最大的一个百分比来做零和
							let diff = 1 - sumPercent
							let item = list.find(item => item.percent === maxPercent)
							if (item) {
								item.percent += diff
							}
						}
            
						this.expTypeStatistics(this.exptypeList)
					}
				})
			},
			dataTypeFilter(val) {
				switch(val) {
          case 0: return '课程'
          case 1: return '自学'
          case 2: return '视频'
          case 3: return '考试'
            // case 4: return '场景'
            // case 5: return '技能树节点'
            // case 6: return '技能树'
          default:return undefined
				}
			},
			expTypeStatistics(data){
				const chart = new G2.Chart({
				container: 'statistical',
				forceFit: true,
				height: 384
				});
				chart.source(data, {
					percent: {
						formatter: val => {
							val = (val * 100).toFixed(2) + '%';
							return val;
						}
					}
				});
				chart.coord('theta', {
					radius: 0.7
				});
				chart.legend('item',{
					marker:'square',
					// marker:{
					// 	symbol:'square',
					// 	// style:{
					// 	// 	r:15
					// 	// }
					// }
						textStyle: {
							fill: this.defaultColor,
						}
				})
				chart.tooltip({
					useHtml:true,
					htmlContent:function(title,items){
						let point = items[0].point.point
						return '<div class="g2-tooltip" style="position:absolute;box-shadow: rgb(174 174 174) 0px 0px 10px; background-color: rgba(255, 255, 255, 0.9); border-radius: 4px;padding: 6px 10px;">'
							+ '<div class="g2-tooltip-title" style="margin-bottom: 4px;">'+point.item
						  +'</div>'
							+ '<ul class="g2-tooltip-list" ><li><span style="width:5px;height:5px;background:#ff9900;border-radius:50%;margin-bottom: 2px;margin-right:10px;display:inline-block"></span><span>百分比：</span><span style="padding-left:26px">'+(point.percent * 100).toFixed(2) +'%<span></li>'
							+'<li><span style="width:5px;height:5px;background:#19be6b;margin-bottom: 2px;border-radius:50%;margin-right:10px;display:inline-block"></span><span style="display: inline-block; width: 56px;">得分：</span><span style="padding-left:26px">'+point.totalScore+'</span></li></ul>'
							+ '</div>'
					}
				})
				chart.intervalStack()
				.position('percent')
				.color('item',['#316BC6','#31C67E','#8531C6','#C63199','#C63156','#C67431','#C6AD31'])
				.label('percent', {
					textStyle: {
						fill: this.defaultColor // 设置标签的字体颜色为红色
					},
					formatter: (val, item) => {
						return item.point.item + ': ' + val;
					}
				})
				// .tooltip('item*percent*totalScore', (item, percent, totalScore) => {
				// 	console.log(1111, item, percent, totalScore)
				// 	percent = (percent * 100).toFixed(2) + '%';
				// 	return {
				// 		name: item,
				// 		value: `\n百分比：${percent}\n\n\n\n\n\n\n
				// 		分数：${totalScore}`,
				// 	};
				// })
				.style({
					lineWidth: 1,
					stroke: '#fff'
				});
				chart.render();
			},
			//积分查询
			queryStudentIntegral(){
				let _this=this
				queryStudentIntegral({userId: this.USER_ID}).then(({data})=>{
					if(data.code==1){
						let dataList=data.data
						_this.integralStatisticsList=dataList
					}
					this.integralStatistics(this.integralStatisticsList)
					this.integralCover(this.integralStatisticsList)
				})
			},
			//积分统计雷达
			integralStatistics(data){
				const { DataView } = DataSet;
					// 测试数据
					// data.forEach(item => {
					// 	item.score = Math.random(0,100)
					// })
					const dv = new DataView().source(data);
					dv.transform({
					type: 'fold',
					fields: 'score', // 展开字段集
					key: 'user', // key字段
					value: '积分' // value字段
					});
					const chart = new G2.Chart({
						container: 'integral',
						forceFit: true,
						height: 384,
						padding: [ 0, 0, 0, 0 ]
					});
					chart.source(dv, {
					'积分': {
						min: 0,
					}
					});
					chart.coord('polar', {
					radius: 0.7
					});
					chart.axis('name', {
						line: null,
						tickLine: null,
						label: {
							autoRotate: false,
							autoHide: false, // 取消自动隐藏label
							formatter(text) {
							// 字符太长添加省略号
							return text.length > 6 ? `${text.slice(0, 6)}...` : text;
							},
							textStyle: {
								fill: this.defaultColor // 设置标签的字体颜色为红色
							},
						},
						grid: {
							lineStyle: {
								lineDash: null,
								stroke:'#D5DCE8'
							},
							hideFirstLine: false
							},
							// label: {
							// 	textStyle: {
							// 		fill: 'red',
							// 		margin:[30,30,30,30]
							// 	}
							// }
						});
					chart.axis('积分', {
						line: null,
						tickLine: null,
						grid: {
							type: 'polygon',
							lineStyle: {
								lineDash: null,
								stroke:'#D5DCE8'
							}
						},
						label: {
							textStyle: {
								fill: this.defaultColor, // 设置刻度字体的颜色为红色
							}
						}
					});
					chart.tooltip({
						useHtml:true,
						htmlContent:function(title,items){
							let point = items[0]
							return '<div class="g2-tooltip" style="position:absolute;box-shadow: rgb(174 174 174) 0px 0px 10px; background-color: rgba(255, 255, 255, 0.9); border-radius: 4px;padding: 6px 10px;">'
								+ '<div class="g2-tooltip-title" style="margin-bottom: 4px;">'+ point.title +'</div>'
								+ '<ul class="g2-tooltip-list" ><li><span style="width:5px;height:5px;background:#9DB7FF;border-radius:50%;margin-bottom: 2px;margin-right:10px;display:inline-block"></span><span>积分：</span><span style="padding-left:26px">'+ point.value +'<span></li></ul>'
								+ '</div>'
						}
					})
					chart.legend('user', {
					marker: 'circle',
					offset: 30
					});
					chart.line().position('name*积分').color('user',['#9DB7FF'])
					.size(1);
					chart.point().position('name*积分').color('user',['#9DB7FF'])
					.shape('circle')
					.size(3)
					.style({
						stroke: '#fff',
						lineWidth: 1,
						fillOpacity: 1
					});
				chart.area().position('name*积分').color('user',['rgba(40,114,223,0.12)']);
				chart.view({
					start: {
						x: 0.25,
						y: 0.25
					},
					end: {
						x: 0.75,
						y: 0.75
					}
				});
					chart.render();
			},
			//积分统计覆盖雷达
			integralCover(data){
				// 测试数据
				// data.forEach(item => {
				// 	item.process=Math.random(0,1).toFixed(2)*100 //parseFloat(item.process)
				// })
				const { DataView } = DataSet;
					data.forEach(item => {
						item.process=parseFloat(item.process)
					})
					const dv = new DataView().source(data);
					dv.transform({
					type: 'fold',
					fields: ['process'], // 展开字段集
					key: 'user', // key字段
					value: '覆盖度' // value字段
					});
					const chart = new G2.Chart({
						container: 'process',
						forceFit: true,
						height: 384,
						padding: [ 0, 0, 0, 0 ]
					});
					chart.source(dv, {
					'覆盖度': {
						min: 0,
						max:100
					}
					});
					chart.coord('polar', {
					radius: 0.7
					});
					chart.axis('name', {
					line: null,
					tickLine: null,
					label: {
						autoRotate: false,
						autoHide: false, // 取消自动隐藏label
						formatter(text) {
						// 字符太长添加省略号
						return text.length > 6 ? `${text.slice(0, 6)}...` : text;
						},
						textStyle: {
							fill: this.defaultColor, // 设置刻度字体的颜色为红色
						}
					},
					grid: {
						lineStyle: {
							lineDash: null,
							stroke:'#D5DCE8'
						},
						hideFirstLine: false
					}
					});
					chart.axis('覆盖度', {
						line: null,
						tickLine: null,
						grid: {
							type: 'polygon',
							lineStyle: {
								lineDash: null,
								stroke:'#D5DCE8'
							}
						},
						label: {
							textStyle: {
								fill: this.defaultColor, // 设置刻度字体的颜色为红色
							}
						}
					});
					chart.legend('user', {
						marker: 'circle',
						offset: 30
					});
					chart.tooltip({
						useHtml:true,
						htmlContent:function(title,items){
							let point = items[0]
							return '<div class="g2-tooltip" style="position:absolute;box-shadow: rgb(174 174 174) 0px 0px 10px; background-color: rgba(255, 255, 255, 0.9); border-radius: 4px;padding: 6px 10px;">'
								+ '<div class="g2-tooltip-title" style="margin-bottom: 4px;">'+ point.title +'</div>'
								+ '<ul class="g2-tooltip-list" ><li><span style="width:5px;height:5px;background:#7DD6FF;border-radius:50%;margin-bottom: 2px;margin-right:10px;display:inline-block"></span><span>覆盖度：</span><span style="padding-left:26px">'+ `${point.value}%` +'<span></li></ul>'
								+ '</div>'
						}
					})
					chart.line().position('name*覆盖度').color('user',['#7DD6FF'])
					.size(1)
					// .tooltip('name*覆盖度',(x,a) => {
					// 	return {
					// 		name:'覆盖度',
					// 		value:`${a}%`
					// 	}
					// });
					chart.point().position('name*覆盖度').color('user',['#7DD6FF'])
					.shape('circle')
					.size(3)
					.style({
						stroke: '#fff',
						lineWidth: 1,
						fillOpacity: 1
					})
					// .tooltip('name*覆盖度',(x,a) => {
					// 	return {
					// 		name:'覆盖度',
					// 		value:`${a}%`
					// 	}
					// });
					chart.area().position('name*覆盖度').color('user',['rgba(40,223,211,0.12)'])
					// .tooltip('name*覆盖度',(x,a) => {
					// 	return {
					// 		name:'覆盖度',
					// 		value:`${a}%`
					// 	}
					// });
					chart.render();
			},
			querySkillTreeCovered(){
				let _this=this
				querySkillTreeCovered({userId: this.USER_ID}).then(({data})=>{
					if(data.code==1){
						let dataList=data.data
						_this.skillTreeCoveredList=dataList
					}
					this.skillCover(this.skillTreeCoveredList)
				})
			},
			skillCover(data){
				//测试数据
					// data.forEach(item => {
					// 	item.process= Math.random(0,1).toFixed(2)*100 //parseFloat(item.process)
					// })
					const { DataView } = DataSet;
					data.forEach(item => {
						item.process= parseFloat(item.process)
					})
					const dv = new DataView().source(data);
					dv.transform({
					type: 'fold',
					fields: ['process'], // 展开字段集
					key: 'user', // key字段
					value: '完成度' // value字段
					});
					const chart = new G2.Chart({
						container: 'skilltree',
						forceFit: true,
						height: 384,
						padding: [ 0, 0, 0, 0 ]
					});
					chart.source(dv, {
					'完成度': {
						min: 0,
						max:100
					}
					});
					chart.coord('polar', {
					radius: 0.7
					});
					chart.axis('name', {
					line: null,
					tickLine: null,
					label: {
						autoRotate: false,
						autoHide: false, // 取消自动隐藏label
						formatter(text) {
						// 字符太长添加省略号
						return text.length > 6 ? `${text.slice(0, 6)}...` : text;
						},
						textStyle: {
								fill: this.defaultColor // 设置标签的字体颜色为红色
							},
					},
					grid: {
						lineStyle: {
							lineDash: null,
							stroke:'#D5DCE8'
						},
						hideFirstLine: false
					}
					});
					chart.axis('完成度', {
						line: null,
						tickLine: null,
					grid: {
						type: 'polygon',
						lineStyle: {
							lineDash: null,
							stroke:'#D5DCE8'
						}
						},
						label: {
							textStyle: {
								fill: this.defaultColor, // 设置刻度字体的颜色为红色
							}
						}
					});
					chart.legend('user', {
						marker: 'circle',
						offset: 30
					});
					chart.tooltip({
						useHtml:true,
						htmlContent:function(title,items){
							let point = items[0]
							// console.log(point)
							return '<div class="g2-tooltip" style="position:absolute;box-shadow: rgb(174 174 174) 0px 0px 10px; background-color: rgba(255, 255, 255, 0.9); border-radius: 4px;padding: 6px 10px;">'
								+ '<div class="g2-tooltip-title" style="margin-bottom: 4px;">'+ point.title +'</div>'
								+ '<ul class="g2-tooltip-list" ><li><span style="width:5px;height:5px;background:#7DD6FF;border-radius:50%;margin-bottom: 2px;margin-right:10px;display:inline-block"></span><span>完成度：</span><span style="padding-left:26px">'+ `${point.value}%` +'<span></li></ul>'
								+ '</div>'
						}
					})
					chart.line().position('name*完成度').color('user',['#7DD6FF'])
					.size(1)
					// .tooltip('name*完成度',(x,a) => {
					// 	return {
					// 		name:'完成度',
					// 		value:`${a}%`
					// 	}
					// });
					chart.point().position('name*完成度').color('user',['#7DD6FF'])
					.shape('circle')
					.size(3)
					.style({
						stroke: '#fff',
						lineWidth: 1,
						fillOpacity: 1
					})
					// .tooltip('name*完成度',(x,a) => {
					// 	return {
					// 		name:'完成度',
					// 		value:`${a}%`
					// 	}
					// });
					chart.area().position('name*完成度').color('user',['rgba(40,223,211,0.12)'])
					// .tooltip('name*完成度',(x,a) => {
					// 	return {
					// 		name:'完成度',
					// 		value:`${a}%`
					// 	}
					// });
					chart.render();
			},
			//获取竞赛竞争力统计接口 21880
			getCompetStatic() {
				let _this = this;
        getCompetStaticNew({ userId: this.USER_ID }).then(res => {
					if(res.code === 1) {

            let datas = res.attribute.competitiveVOList;
            this.per = res.attribute.percent;
            let totals = res.attribute.totalScore;
            this.totals = totals.toFixed(2)
            let data = [];
            datas.forEach(item => {
              let obj = {};
              // obj.item = _this.filterModeMatch(item.type);
              obj.item = item.description
              obj.score = item.score;
              data.push(obj)
            })
            _this.chart2(data)
					}
				})
			},
			filterModeMatch(mode) {
				let str = '';
				switch (mode) {
					case 2:
						str = '夺旗赛';
						break;
					case 3:
						str = '知识赛';
						break;
					case 7:
						str = '考试';
						break;
					case 8:
						str = '课件';
						break;
					case 9:
						str = '课程';
						break;
					default:
						str = '夺旗赛';
						break;
				}
				return str;
			},
			// 考试成绩统计
			chart1() {
				this.examChart = new G2.Chart({
					container: 'grade',
					forceFit: true,
					height: 304,
					padding: [20, 40, 40, 40]
				});
        // 
        let map = {} // 21791 ，搞不清偶发 items[0].point._origin.name 为undefined ，现在如果没有，就取 map里面的数据
        this.examChartData.forEach((item,idex)=>{
          map[item.time+item.tem+item.type]= item.name
        })
      
				this.examChart.source(this.examChartData, {
					time: {
						type: 'timeCat',
						range: [0, 1],
						mask: 'YY/MM/DD HH:mm',
						// tickCount: 3
					},
				});
				// this.examChart.axis('time', {
				// 	label: {
				// 		position:'middle',
				// 		rotate: 0,
				// 		offset: 15,
				// 		autoRotate: false, // 是否需要自动旋转，默认为 true
				// 		autoHide:true
				// 	}
      			// }),
				this.examChart.axis('time', {
					label: {
						formatter: function(val) {
							return val.split(' ').join('\n'); // 格式化坐标轴显示文本
						},
						offset: 25,
						textStyle: {
							fill: this.defaultColor // 设置标签的字体颜色为红色
						},
					},
				});
				this.examChart.axis('tem', {
					label: {
						textStyle: {
							fill: this.defaultColor, // 设置刻度字体的颜色为红色
						}
					}
				});
				this.examChart.legend(false);
				this.examChart.tooltip({
					shared: true,
					crosshairs: {
					type: 'line',

				},
					useHtml:true,
					htmlContent:function(title,items){
            let item = items[0].point._origin
            let originname = map[item.time+item.tem+item.type]
            // console.log(item.name ,originname)
						return '<div class="g2-tooltip" style="position:absolute;box-shadow: rgb(174 174 174) 0px 0px 10px;border-radius: 4px;padding: 6px 10px;font-size:10px">'
							+ '<div class="g2-tooltip-title" style="margin-bottom: 4px;">'+items[0].title
						  +'</div>'
							+ '<div class="g2-tooltip-title" style="margin-bottom: 4px;">'+(items[0].point._origin.name ||originname)
						  +'</div>'
							+ '<ul class="g2-tooltip-list" ><li><span style="width:5px;height:5px;background:'+items[0].color+';border-radius:50%;margin-right:16px;display:inline-block"></span>'+items[0].name+'<span style="padding-left:26px">'+items[0].value+'<span></li>'
							+'<li><span style="width:5px;height:5px;background:'+items[1].color+';border-radius:50%;margin-right:16px;display:inline-block"></span>'+items[1].name+'<span style="padding-left:26px">'+items[1].value+'</span></li></ul>'
							+ '</div>'
     			}
				})
				this.examChart.area().position('time*tem').color('type', ['l(90) 0:rgb(239, 244, 255) 1:rgb(254, 255, 255)', 'l(90) 0:rgb(255, 248, 237) 1:rgb(254, 255, 255)']).tooltip(false)
				this.examChart.line().position('time*tem').color('type', ['#316BC6', '#48B387']).size(2)
				this.examChart.point().position('time*tem').color('type', ['#316BC6', '#48B387'])
					.size(4)
					.shape('circle')
					.style({
						stroke: '#fff',
						lineWidth: 1
					});
					// 绘制的图表
				this.examChart.render()
				this.overflowResize()
			},
			//获取个人绩效数据
			drowPolar() {
				let _this = this;
				getAssessment(this.USER_ID).then(data => {
					if(data.code === 1) {
						let datas = data.attribute.performanceForType;
						datas.forEach(item => {
							_this.polar(item.typeName, item.performances)
						})
					}
				})
			},

			drowPropertyLines() {
				let _this = this;
				[{
					"propertyName": "course",
					"container": "课程学习曲线"
				}, {
					"propertyName": "experiment",
					"container": "课件学习曲线"
				}, {
					"propertyName": "examination",
					"container": "参与考试曲线"
				}, {
					"propertyName": "drill",
					"container": "参与演练曲线"
				}, {
					"propertyName": "contest",
					"container": "参与竞赛曲线"
				}, ].forEach(obj => {
					let params = {
						propertyName: obj.propertyName,
						userId: this.USER_ID,
					}
					getProperty(params)
						.then(data => {
							if(data.code === 1) {
								let datas = data.attribute.indexList;
								return datas
							}
						}).then(datas => {
							if(datas.length){
									_this.$set(this.studyCurveMap,params.propertyName,false)
									_this.propertyLine(obj.container, datas)
								}else{
									_this.$set(this.studyCurveMap,params.propertyName,true)
								}

						})
				})
			},
			polar(container, datas) {
				const {
					DataView
				} = DataSet;
				let data = [];
				let title = container + '能力评估值';
				datas.forEach(item => {
					let obj = {};
					obj.item = item.name;
					obj[title] = (item.currentScore / item.totalScore * 100).toFixed(2);
					obj.sorts = (item.currentScore / item.totalScore * 100).toFixed(2);
					data.push(obj)
				})
				//data中的值按升序排序
				data = data.sort(function(a,b){
					return a.sorts - b.sorts;
				})
				const dv = new DataView().source(data);
				dv.transform({
					type: 'fold',
					fields: [title, ], // 展开字段集
					key: 'user', // key字段
					value: 'score' // value字段
				});
				const chart = new G2.Chart({
					container: container,
					forceFit: true,
					height: 384,
					padding: [20, 20, 95, 20]
				});
				chart.source(dv, {
					score: {
						min: 0,
						max: 100
					}
				});
				chart.coord('polar', {
					radius: 0.7
				});
				chart.axis('item', {
					line: null,
					tickLine: null,
					grid: {
						lineStyle: {
							lineDash: null,
							stroke:'#D5DCE8'
						},
						hideFirstLine: false
					},
					label: {
							textStyle: {
								fill: this.defaultColor, // 设置刻度字体的颜色为红色
						}
					},
				});
				chart.axis('score', {
					line: null,
					tickLine: null,
					grid: {
						type: 'polygon',
						lineStyle: {
							lineDash: null,
							stroke:'#D5DCE8'
						}
					},
					label: {
							textStyle: {
								fill: this.defaultColor, // 设置刻度字体的颜色为红色
							}
						}
				});
				chart.legend('user', {
					marker: 'circle',
					offset: 30
				});
				chart.line().position('item*score').color('user')
					.size(2);
				chart.point().position('item*score').color('user')
					.shape('circle')
					.size(4)
					.style({
						stroke: '#fff',
						lineWidth: 1,
						fillOpacity: 1
					});
				chart.area().position('item*score').color('user');
				chart.render();
			},

			propertyLine(container, datas) {

				const {
					DataView
				} = DataSet;
				let data = [];
				datas.forEach(item => {
					let obj = {};
					obj.Value = item.value;
					obj.Date = item.date;
					data.push(obj)
				})
				const chart = new G2.Chart({
					container: container,
					forceFit: true,
					height: 384,
					padding: [30, 20, 50, 30]
				});
				chart.axis('Date', {
					label: {
						textStyle: {
							fill: this.defaultColor
						},
						formatter: text => {
							const dataStrings = text.split(' ');
							return dataStrings[0];
						}
					}
				});
				chart.axis('Value', {
					label: {
						textStyle: {
							fill: this.defaultColor
						},
						formatter: text => {
							return text;
						}
					}
				});
				chart.tooltip({
					crosshairs: false
				});
				chart.source(data, {
					Date: {
						tickCount: 10
					}
				});
				chart.line().position('Date*Value');
				// guide
				const max_min = findMaxMin();
				const max = max_min.max;
				const min = max_min.min;
				chart.guide().dataMarker({
					top: true,
					content: '总计：' + max.Value,
					position: [max.Date, max.Value],
					style: {
						text: {
							fontSize: 12
						}
					},
					lineLength: 30
				});
				// chart.guide().dataMarker({
				//   top: true,
				//   content: '全部谷值：' + min.Value,
				//   position: [ min.Date, min.Value ],
				//   style: {
				//     text: {
				//       fontSize: 12
				//     }
				//   },
				//   lineLength: 50
				// });
				chart.render();

				function findMaxMin() {
					let maxValue = 0;
					let minValue = 38400;
					let maxObj = null;
					let minObj = null;
					for(let i = 0; i < data.length; i++) {
						const d = data[i];
						if(d.Value > maxValue) {
							maxValue = d.Value;
							maxObj = d;
						}
						if(d.Value < minValue) {
							minValue = d.Value;
							minObj = d;
						}
					}
					return {
						max: maxObj,
						min: minObj
					};
				}
			},

			// 竞争力分析
			chart2(data) {
				var _DataSet = DataSet,
					DataView = _DataSet.DataView;
				var dv = new DataView().source(data);
				dv.transform({
					type: 'fold',
					fields: ['score'], // 展开字段集
					key: 'user', // key字段
					value: 'score' // value字段
				});
				var chart = new G2.Chart({
					container: 'competitive',
					forceFit: true,
					width: 384,
					height: 280,
					padding: 'auto',
				});
				chart.source(dv, {
					score: {
						min: 0,
						max: 100
					}
				});
				const defs = {
				'score': {
					alias: '分数'
				}
			};

				// chart.coord('polar', {
				//     radius: 0.65
				// });
				chart.tooltip({
					g2Tooltip: {
						backgroundColor: 'red', // 设置 tooltip 背景色
						color: '#fff' // 设置 tooltip 字体颜色
					}
				});
				chart.axis('item', {
				    label: {
				       textStyle: {
								fill: this.defaultColor // 设置标签的字体颜色为红色
							},
				    }
				});
				chart.axis('score', {
				    label: {
				       textStyle: {
								fill: this.defaultColor // 设置标签的字体颜色为红色
							},
				    }
				});
				// chart.axis('score', {
				//     line: null,
				//     tickLine: null,
				//     grid: {
				//         type: 'polygon',
				//         lineStyle: {
				//             lineDash: null
				//         }
				//     }
				// });
				chart.source(data,defs);
				chart.line().position('item*score').shape('circle').color('#1563C2').size(1);
				chart.point().position('item*score').shape('circle').color('#1563C2').size(3).style({
                    stroke: '#fff',
                    lineWidth: 1,
                    fillOpacity: 1
                });
				// chart.line().position('item*score').shape('circle').color('user').size(2);
				// chart.point().position('item*score').color('user').shape('circle').size(4).style({
				//     stroke: '#fff',
				//     lineWidth: 1,
				//     fillOpacity: 1
				// });
				// chart.area().position('item*score').shape('circle').color('user');
				chart.render();
				this.overflowResize()
			},
			//获取试验知识点
			getExpStatic() {
				statisticsExp().then(data => {
					if(data.code === 1) {
						// let data = data.data;
						let arr = [];
						data.forEach(item => {
								let objLearn = {}
								objLearn.company = '已学';
								objLearn.type = item.typeName;
								objLearn.value = item.learnedNum;
								arr.push(objLearn);
								let objTotal = {}
								objTotal.company = '总数';
								objTotal.type = item.typeName;
								objTotal.value = item.total;
								arr.push(objTotal);
							})
							//   this.chart3(arr);
					} else {
						this.$Message.error(data.message)
					}
				})
			},
			// 知识点统计
			chart3(data) {
				var chart = new G2.Chart({
					container: 'knowledgepoints',
					forceFit: true,
					height: 410,
					padding: [30, 30, 40, 30]
				});
				chart.source(data);
				chart.scale('value', {
					alias: '占比（%）',
				});
				chart.axis('type', {
					label: {
						textStyle: {
							fill: '#aaaaaa'
						}
					},
					tickLine: {
						alignWithLabel: false,
						length: 0
					},
				});
				chart.axis('value', {
					label: {
						textStyle: {
							fill: '#aaaaaa'
						},
					},
				});
				chart.legend(false);
				chart.interval().position('type*value').color('company', ['rgb(47, 112, 255)', 'orange']).adjust([{
					type: 'dodge',
					marginRatio: 0.4
				}]);
				chart.render();
				this.overflowResize()
			},
			// 图表溢出resize
			overflowResize() {
				const e = document.createEvent('Event');
				e.initEvent('resize', true, true);
				window.dispatchEvent(e);
			},
			// 考试任务
			getExamList() {
				this.joinedExam = []
				let params = {
					examinationName: '',
					startTime: '',
					endTime: '',
				}
				getUserExam(this.USER_ID, params)
					.then(data => {
						if(data.code == 1) {
							let dataList = data.attribute.data
							this.joinedExam = dataList;
							for(let i = 0; i < dataList.length; i++) {
								// 绘制图表数据    提交了试卷且考试成绩已经发布
								if(dataList[i].status === 1 && dataList[i].submitStatus === 1) {
									this.examChartData.push({
										time: dataList[i].startTime,
										type: '我的分数',
										tem: dataList[i].grade,
									})
									this.examChartData.push({
										time: dataList[i].startTime,
										type: '平均分数',
										tem: dataList[i].avgScore,
									})
								}
							}
							//this.chart1()
						} else {
							this.$Message.warning(data.message);
						}
					})
					.catch(err => {
					})
			},
			// 课件统计 课程统计
			clickClass(name) {
				this.classBool = false
				this.expBool = false
				this.videoBool = false
				if(name === 'course') {
					this.classBool = true
				} else if(name === 'exper') {
					this.expBool = true
				} else if(name === 'video') {
					this.videoBool = true
				}
				this.tabsName = name
				this.getSourseData()
			},
			// 获取有多少课程课件，及学习了多少课程课件
			getSourseData() {
				getRourse(this.USER_ID)
					.then(data => {
						if(data.code === 1) {
							let getData = data.attribute.data
							this.allCourseCount = getData.coursedSum
							this.allExpCount = getData.expedSum
							this.learnedDuration = getData.duration > 0 ? (getData.duration / 3600).toFixed(0) : 0
							this.videoLookedNum = getData.videoLookedNum
							if(this.tabsName === 'course') {
								this.total = getData.allCourseSum
								this.learned = getData.coursedSum
							} else if(this.tabsName === 'exper') {
								this.total = getData.allExpSum
								this.learned = getData.expedSum
							} else if(this.tabsName === 'video') {
								this.total = getData.videoNum
								this.learned = getData.videoLookedNum
							}
							let num = 0
							if(this.learned == 0) {
								num = 0
							} else {
								num = (this.learned / this.total) * 100
							}
							this.proportion = parseFloat(num.toFixed(1))
						}
					})
					.catch(err => {
					})
			},
			// 任务列表
			initTaskList() {
				// 默认获取当前月的任务
				let date = new Date(),
					y = date.getFullYear(),
					m = date.getMonth();
				let firstDay = new Date(y, m, 1);
				let lastDay = new Date(y, m + 1, 0);
				this.queryStime = firstDay.getFullYear() + '-' + (firstDay.getMonth() + 1) + '-' + firstDay.getDate() + ' 00:00:00'
				this.queryEtime = lastDay.getFullYear() + '-' + (lastDay.getMonth() + 1) + '-' + lastDay.getDate() + ' 23:59:59'
				this.taskListData()
			},
			taskListData() {
				let params = {
					userId:this.USER_ID,
					// type: this.queryType,
					startTime: this.queryStime,
					endTime: this.queryEtime,
				}
				this.surfaceTaskList = []
				getTaskExperList(params)
					.then(data => {
						if(data.code === 1) {
							let items = data.data.items
							let getDate = new Date().getTime()
							items = items.sort((a, b) => {
								return a.startTime < b.startTime ? 1 : -1;
							})
							for(let i = 0; i < items.length; i++) {
								let endTime = new Date(items[i].endTime).getTime()
								if(getDate < endTime) {
									this.surfaceTaskList.push(items[i])
								}
							}
							if(this.surfaceTaskList.length > 0) {
								this.showRightTaskList = true
								this.showDefImg = false
							} else {
								this.showRightTaskList = false
								this.showDefImg = true
							}
						} else {
							this.showRightTaskList = false
							this.showDefImg = true
							this.$Message.error({
								content: data.message,
								duration: 3,
							})
						}
					})
					.catch(err => {
						this.showRightTaskList = false
						this.showDefImg = true
					})
			},
			// 切换日期获得的任务列表
			getDayTaskList(dateTime) {
				this.queryStime = dateTime + ' 00:00:00'
				this.queryEtime = dateTime + ' 23:59:59'
				this.taskListData()
			},
			// 文字
			handleText(type) {
				let obj = {
					text: '',
					color: '',
				}
				switch(type) {
					case 1:
						obj.text = this.$t('testingTask')
						obj.color = 'orange'
						break;
					case 2:
						obj.text = this.$t('Drilltask')
						obj.color = 'blue'
						break;
					case 3:
						obj.text = this.$t('Competitiontask')
						obj.color = 'green'
						break;
					case 4:
						obj.text = this.$t('Examinationtask')
						obj.color = 'rgb(255, 109, 109)'
						break;
				}
				return obj
			},
			// 状态
			handleStatus(type, status, sceneType, val) {
				let color = ''
				let text = ''
				if(type === 4 && (status === '2' || status === 2)) { // 考试进行中
					color = 'success'
					text = this.$t('ongoing')
				} else if(type === 4 && (status === '0' || status === 0)) { // 考试未开始
					color = 'rgb(255, 61, 61)'
					text = this.$t('notBegin')
				} else if(type === 3 && (status === '0' || status === 0) && sceneType === 3) { // 竞赛 未开始   知识赛
					color = 'rgb(255, 61, 61)'
					text = this.$t('notBegin')
				} else if(type === 3 && (status === '1' || status === 1) && sceneType === 3) { // 竞赛 进行中  知识赛
					color = 'success'
					text = this.$t('ongoing')
				} else if(type === 3 && (status === '0' || status === 0) && (sceneType === 2 || sceneType === 1)) { // 竞赛 未开始  攻防赛ctf
					color = 'rgb(255, 61, 61)'
					text = this.$t('notBegin')
				} else if(type === 3 && (status === '2' || status === 2) && (sceneType === 2 || sceneType === 1)) { // 竞赛 进行中  攻防赛ctf
					color = 'success'
					text = this.$t('ongoing')
				} else if(type === 2 && (status === 0 || status === '0')) { // 演练未开始
					color = 'rgb(255, 61, 61)'
					text = this.$t('notBegin')
				} else if(type === 2 && (status === 2 || status === '2')) { // 演练进行中
					color = 'success'
					text = this.$t('ongoing')
				}
				if(type === 1) { // 查看课程详情
					let nowTime = (new Date()).valueOf()
					let getStime = val.startTime
					let getEtime = val.endTime
					let sTime = moment(getStime).valueOf()
					let eTime = moment(getEtime).valueOf()
					if(nowTime < eTime && nowTime >= sTime) {
						color = 'success'
						text = this.$t('ongoing')
					} else if(nowTime < sTime) {
						color = 'rgb(255, 61, 61)'
						text = this.$t('notBegin')
					}
				}
				return {
					color: color,
					text: text
				}
			},
			// 考试时间
			handleTime(stime, etime) {
				let getSday = stime.split(' ')[0]
				let getEday = etime.split(' ')[0]
				if(getSday === getEday) {
					let e = etime.split(' ')[1]
					return stime + ' - ' + e
				} else {
					return stime + ' — ' + etime
				}
			},
			// 切换类型
			changeTaskType(val) {
				this.queryType = parseInt(val)
				this.taskListData()
			},
			// 设置跳转的路由
			setRoute(type, val) {
				let routeList = this.$router.options.routes[1].children
				for(let j = 0; j < routeList.length; j++) {
					this.$set(routeList[j].meta, 'mark', false)
					if(type === 1 && routeList[j].name === 'lesson') {
						routeList[j].meta.mark = true
						sessionStorage.setItem('pathName', 'lesson')
					} else if(type === 0 && routeList[j].name === 'competitionList') {
						routeList[j].meta.mark = true
						sessionStorage.setItem('pathName', 'competitionList')
						let childArr = routeList[j].children
						for(let n = 0; n < childArr.length; n++) {
							childArr[n].meta.mark = false
							if(val === 'gf') {
								childArr[0].meta.mark = true
							} else if(val === 'dq') {
								childArr[1].meta.mark = true
							} else if(val === 'zs') {
								childArr[1].meta.mark = true
							}
						}
					} else if(type === 2 && routeList[j].name === 'drillList') {
						routeList[j].meta.mark = true
						sessionStorage.setItem('pathName', 'drillList')
						let childArr = routeList[j].children
						for(let n = 0; n < childArr.length; n++) {
							childArr[n].meta.mark = false
							if(val === 'dk') {
								childArr[3].meta.mark = true
							} else if(val === 'st') {
								childArr[1].meta.mark = true
							} else if(val === 'hw') {
								childArr[2].meta.mark = true
							}
						}
					}
				}
			},
			//获取我的课程总数
			getMyAllCourse() {
				let _this = this
				let paramas = {
						pageSize: 8,
						pageIndex: 1,
						dictTypeArr: [],
						difficulty: '',
						type: '2',
						ecname: '',
						isIndex: true,
						resourceAssignFlag: 'S'
					}
					// 页面跳转前 找classId
				return allCourse(paramas)
					.then(data => {
						this.totalCourse = data.data.total;
						return data.data.total
					})
					.catch(err => {
					})
			},
			//获取我的试验总数
			getMyAllExp() {
				let _this = this
				let paramas = {
						pageSize: 8,
						pageIndex: 1,
						dictTypeArr: [],
						difficulty: '',
						type: '1',
						ecname: '',
						isIndex: true,
						resourceAssignFlag: 'S'
					}
					// 页面跳转前 找classId
				return allCourse(paramas)
					.then(data => {
						this.totalExp = data.data.total
						return data.data.total
					})
					.catch(err => {
					})
			},
			// 获取参与的训练个数
			// 场景列表
			getProList() {
				getPrjList()
					.then(data => {
						if(data.code === 1) {
							this.trainNum = data.data.items.length
						}
					})
					.catch(err => {
					})
			},
			// 竞赛图（知识赛和夺旗赛）
			comAllScore() {
				getAllScore({ userId: this.USER_ID })
					.then(data => {
						if(data.code === 1) {
							let items = data.attribute
							// let items = this.dataList // 假数据
							let knowData = []
							let flagData = []
							let chartObj = {}
							for (let i = 0; i < items.length; i++) {
								let obj = {
									time: items[i].startDate,
									contestName: items[i].contestName,
									score: items[i].score,
								}
								if(items[i].matchMode === '2'){
									obj.name = items[i].teamName ? '团体' : '个人'
								}
								let extension = JSON.parse(items[i].extension);
								let { hwType,hwExtensionType } = extension
								if(items[i].matchMode === '5'){ //护网，为了分开画图，重新定义类型(与归档类型一致)
									if(hwType === 0){
										items[i].matchMode === hwExtensionType === '2' ? '12' : hwExtensionType === '3' ? '13': '5'
									}else if(hwType === 1){ //实网(新护网)
										items[i].matchMode === '14'
									}else if(hwType === 2){ //众测
										items[i].matchMode === '12'
									}else if(hwType === 3){ //仿真
										items[i].matchMode === '15'
									}
								}
								//11 众测   12 日常  13 大型  14 实网   5 老护网   15  仿真
								if(!chartObj[items[i].matchMode]){
									chartObj[items[i].matchMode] = [obj]
								}else{
									chartObj[items[i].matchMode].push(obj)
								}
							}
							this.useDrillAndCompete.forEach((item,index) => {
								item.data = chartObj[item.type] || []
								item.showKnowImg2 = item.data.length === 0
								item.showKnowCon2 = item.data.length > 0
								item.show = false
							})
							this.useDrillAndCompete.sort((a,b) => b.data.length - a.data.length)
							this.useDrillAndCompete.forEach((item,index) => {
								if(index < 3){
									item.show = true
									setTimeout(() => {
										this.renderChart(item);
									})
								}
							})

						} else {
							this.useDrillAndCompete.forEach((item,index) => {
								item.data = []
								item.showKnowImg2 = true
								item.showKnowCon2 = false
								item.show = false
							})
						}
					})
					.catch(err => {
						this.showKnowImg2 = true
						this.showKnowCon2 = false
						this.showKnowImg3 = true
						this.showKnowCon3 = false
						//
						this.awdDrillDiv = false
						this.awdContestDiv = false
						this.stDrillDiv = false
						this.hwDrillDiv = false
						this.defenseDiv = false
						this.multipleDrillDiv = false
						this.awdPlusContestDiv = false
						this.opContestDiv = false
					})
			},
			renderChart(chartInfo){
				if(chartInfo.data.length === 0){
					return
				}
				let data = chartInfo.data;
				var chart = new G2.Chart({
					container: chartInfo.name,
					forceFit: true,
					height: 304,
					padding: [20, 40, 40, 40]
				});

				chart.source(data, {
					time: {
					type: 'timeCat',
					range: [0, 1],
					mask: 'YY/MM/DD HH:mm'
					},
				});
				chart.scale('score', {
					alias: '我的分数',
					min: 0
				});
				chart.scale('contestName', {
					alias: `${chartInfo.title}名称`,
					range: [0, 1],
				});
				chart.legend(false);
				chart.tooltip({
					shared: true,
					crosshairs: false,
				})
				chart.axis('score', {
						label: {
							textStyle: {
								fill: this.defaultColor, // 设置刻度字体的颜色为
							}
						}
					});
				chart.axis('time', {
					label: {
					formatter: function(val) {
						return val.split(' ').join('\n'); // 格式化坐标轴显示文本
						},
						textStyle: {
							fill: this.defaultColor // 设置标签的字体颜色为红色
						},
					offset:25
					},
				});
				chart.line().position('time*score').color('#1563C2').size(1).tooltip('score*contestName')
				chart.point().position('time*score')
					.size(3)
					.shape('circle')
					.style({
					stroke: '#fff',
					lineWidth: 1
					});
				chart.render();
				this.overflowResize()
			},
			moreEchart () {
				this.moreFlag = !this.moreFlag
				if (this.moreFlag) {
					this.useDrillAndCompete.forEach((item,index) => {
					if(index > 2){
						item.show = true;
						setTimeout(() => {
						this.renderChart(item);
						})
					}
					})
				}else{
					this.useDrillAndCompete.forEach((item,index) => {
					if(index > 2){
						item.show = false;
					}
					})
				}
			},
			gotoPage(item) {
                // 0.培训 3.演练 2.竞赛 1.考试
                switch (item.type) {
                    case 0:
                        this.gotoTrain(item);
                        break;
                    case 1:
                        this.gotoExam(item);
                        break;
                    case 2:
                    case 3:
                        this.gotoScene(item);
                        break;
                }
            },
            gotoExam() {
                this.$router.push({
                    name: 'exam'
                });
            },
            gotoTrain(item) {
                this.$router.push({
                    name: 'lessonDetails',
                    query: {
						resourceAssignFlag:'T',
						lessonId:item.id,
						classId:item.id,
						ecId:item.id,
						type:'lesson',
						imgName:'lesson',
						teacherId:this.USER_ID
                    }
                });
            },
            // 将比赛状态转义,知识赛
            statusEscape(status) {
                switch (status) {
                    case 0: // 准备中
                    case 1:
                        return '0'; // 准备完毕
                    case 2: // 开始中
                    case 3: // 裁判评判阶段
                    case 5:
                        return '1'; // 暂停
                    case 4:
                        return '2'; // 结束
                    default:
                        return '0';
                }
            },
            gotoScene(item) {
                getdrillitemdetail(item.id).then(async (data) => {
                    let drillDetail = data.data.data;
					let extension;
                    try {
                        extension = JSON.parse(drillDetail.extension);
                    } catch (e) {
                        extension = {};
                    }
                    let path,mode,tip;
                    switch (Number.parseInt(drillDetail.type)) {
                        case 0:
                            path = '/awdDrillDetail';
							mode='drill_detail';
							tip='演练';
                            break;
                        case 1:
                            path = '/awdContestDetail';
							mode='adw_detail';
							tip='竞赛';
                            break;
                        case 2:
                            path = '/ctfContestDetail';
							mode='ctf_detail';
							tip='竞赛';
                            break;
                        case 3:
                            path = '/kcContestDetail';
							mode = 'kcContestDetail';
							tip='竞赛';
                            break;
                        case 4:
                            path = '/stDrillDetail';
							mode='brt_detail';
							tip='演练';
                            break;
                        case 5:
							if(extension.hwType === 1){
								return
							}else{
								if(extension.hwExtentionType === 2) {
									path = 'dailyDrillDetail'
								}else{
									path = 'hwDrillDetail'
								}
							}
                			mode='pne_detail';
							tip='演练';
                            break;
                        case 6: // 暂无应急演练页面的跳转
                            path = '';
                            break;
                        case 7:
                            path = '/multipleDrillDetail';
							mode='brt_detail';
							tip='演练';
                            break;
                        case 8:
                            path = '/awdPlusContestDetail';
							mode='adw_plus_detail';
							tip='竞赛';
                            break;
						case 9:
							path = '/opContestDetail';
							mode='op_detail';
							tip='竞赛';
                            break;
						case 10:
							path = '/emergencyDefenseDrillDetail';
							mode='egy_detail';
							tip='演练';
                    }
					if(drillDetail.progress=='0'){
						this.$Message.info(`${tip}尚未开始！请稍后...`);
						return false;
					}
					if(drillDetail.progress=='5'){
						this.$Message.info(`${tip}已暂停！请稍后...`);
						return false;
					}
					this.$router.push({
						path: path,
						query:{
							projectId:drillDetail.projectId,
							id:drillDetail.id,
							status:drillDetail.progress,//status
							endTime:drillDetail.endTime,
							hlConfig:extension.hlConfig,
							name:drillDetail.name,
							mode:mode
						}
					})
                });
            }
		}
	}
</script>
<style scoped>
 .more{
	float: right;
	/* color: rgb(56, 56, 211); */
	cursor: pointer;
	/* margin-bottom: 20px; */
	text-align: center;
 }
.flex-btn-img{
	  display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;

}
	.my-flex {
		display: flex;
		flex-wrap: wrap;
    	justify-content: space-between;
		/* margin-bottom: 20px; */
	}
	.my-col {
		padding: 20px;
		border-radius: 10px;
		background-color:var(--card-body-bgcolor);
		position: relative;
		top: 0px;
		left: 0px;
		min-height: 300px;
		margin-bottom: 20px;
	}
	.col-2 {
		width: calc(50% - 10px);
		height:384px;
	}
	.col-3 {
		width: calc(33.3333% - 10px);
	}
	#homer_Middle .title {
		font-size: 18px;
		color: var(--default-color);
		font-weight: 600;
	}
	.cusdom-tooltip{
		position:absolute;
		box-shadow: 1px 1px 2px 4px #cbcbd3;
		border-radius: 4px;
	}
	/deep/ .ivu-badge-status-processing{
		background-color:#316BC6;
	}
	/deep/ .ivu-badge-status-warning {
		background-color: #48B387;
	}

	/deep/ .ivu-tabs-ink-bar {
		background: none;
	}

	/deep/ .ivu-tabs-nav .ivu-tabs-tab-active {
		color: #303030!important;
		font-weight: 600!important;
	}

	/deep/ .ivu-tabs-nav .ivu-tabs-tab {
		color: #8e92a6;
		font-weight: 600!important;
	}

	/deep/ .ivu-tabs-nav .ivu-tabs-tab:hover {
		color: #303030;
		font-weight: 600!important;
	}

	/deep/ .ivu-tabs-bar {
		border-bottom: 1px dashed #dcdee2;
	}

	/deep/ .ivu-badge-status-dot {
		/* width: 4px; */
		/* height: 4px; */
	}

	.filter .read {
		cursor: pointer;
	}

	.home-top {
		width: 100%;
		height: 348px;
		border-radius: 10px;
		display: flex;
		justify-content: space-between;
		/* position: relative; */
	}

 .study-data-wrap {
   width: 49%;
   position: relative;
 }

 .study-data-wraps {
   width: 100%;
   height:100%;
   display: grid;
   grid-template-columns: repeat(3,calc((100% - 20px) / 3));
   grid-template-rows: repeat(4,calc((100% - 20px) / 4));
   grid-row-gap: 10px;
   grid-column-gap: 10px;
   padding-bottom: 10px;
   /* flex-wrap: wrap; */
   /* justify-content: space-between; */
   /* align-content: space-between; */
 }

 .study-data-wraps .study-honor {
   grid-column-start: 1;
   grid-column-end: 3;
   grid-row-start: 1;
   grid-row-end: 4;
   justify-content: space-around
 }
 .study-honor .study-num {
   display: flex;
   flex-direction: column;
   width: auto;
 }
 .study-honor .study-num > p{
   font-size: 14px;
   /* width: 42%; */
   /* background: #C81125; */
   color: #fff;
   /* border-radius: 20px; */
   position: relative;
   top: -22px;
   text-align: center;
 }
 .study-data {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   /* padding: 30px 50px;
     text-align: center; */
   background-color: var(--card-body-bgcolor);
   border-radius: 10px;
 }

 .study-num {
   width: 6em;
   margin-bottom: 14px;
   color: var(--default-color);
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 36px;
 }
 .study-num span {
   font-weight: 600;
   font-size: 20px;
   width: calc(100% - 50px);
 }
 .study-data:not(.study-honor) .study-num img {
   /* height: 28px; */
   margin-right: 14px;
 }

 .study-text {
   /* width: 5em; */
   color: var(--default-color);
   text-align: center;
 }

 .study-honor .study-text {
   font-weight: 700;
   color: var(--default-color);
   line-height: 14px;
   margin-top: 30px;
 }
 .study-img {
   position: absolute;
   bottom: 0;
   right: 30px;
 }

	.middle-left {
		width: 100%;
	}
	.middle-left /deep/ .ivu-tabs-nav-next,
	.middle-left /deep/ .ivu-tabs-nav-prev{
		background: #fff;
		z-index: 2;
	}
	.middle-left /deep/ .ivu-tabs-nav-next{
		right:-4px;
	}
	.middle-left /deep/ .ivu-tabs-nav-prev{
		left:-4px;
	}
	.mygrades {
		display: flex;
		justify-content: space-between;
	}

	.mygrades>div:nth-child(2) {
		/*position: relative;
		top: -46px;*/
	}

	#grade {
		width: 100%;
		height:100%;
	}

	#konwDiv {
		width: 100%;
		height:100%;
		/*height: 418px;*/
	}

	#flagDiv {
		width: 100%;
		height:100%;
		/*height: 418px;*/
	}
	#statistical {
		width: 100%;
		height:100%;
		/*height: 418px;*/
	}
	#integral{
		width: 100%;
		height:100%;
	}
	#process{
		width: 100%;
		height:100%;
	}
	#skilltree{
		width: 100%;
		height: 100%;
		/* margin: 50px 0px; */
	}

	.middle-right {
		width: 49%;
		height: 100%;
		background-color: var(--card-body-bgcolor);
		border-radius: 10px;
		padding: 20px;
	}

	#competitive {
		width: 100%;
		height:100%;
	}

	.home-bottom {
		margin-top: 20px;
	}

	.bottom-left {
		background-color: #fff;
		padding: 30px;
		height: 384px;
		border-radius: 10px;
	}

	.bottom-right {
		background-color: #fff;
		padding: 30px;
		height: 384px;
		border-radius: 10px;
		position: relative;
	}

	#knowledgepoints {
		width: 100%;
		height: 452px;
	}

	.classText {
		font-weight: 600;
		font-size: 20px;
		color: #333;
	}

	.expText {
		font-weight: 600;
		font-size: 20px;
		color: #333;
	}

	.videoText {
		font-weight: 600;
		font-size: 20px;
		color: #333;
	}

	#ringPre {
		width: 100%;
		height: 350px;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}

	.class-exp-wrap {
		display: flex;
		justify-content: space-between;
	}

	.class-exp-top {
		display: flex;
		justify-content: flex-start;
		color: #999;
		align-items: center;
		min-width: 150px;
	}

	.class-exp-data {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 30%;
		text-align: center;
	}

	.class-per {
		font-size: 20px;
		color: rgb(47, 112, 255);
		font-weight: 600;
		margin-bottom: 3px;
	}

	.class-exp-num {
		font-weight: 600;
		font-size: 22px;
		color: #333;
	}
	/*calendar*/
    .calendar {
        height: 368px;
    }

    .calendar-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 14px;
        height: 80px;
        background: var(--home-cal-head-bgcolor);
    }

    .calendar-title .value {
        font-size: 24px;
        font-weight: bold;
    }

    .calendar-title .value .year {
        margin-left: 12px;
        font-size: 14px;
        color: var(--home-cal-year-color);
    }

    .calendar-title .handle {
        display: flex;
        align-items: center;
    }

    .calendar-title .handle li {
        height: 16px;
        line-height: 16px;
        cursor: pointer;
    }

    .calendar-title .handle li i {
        font-weight: bold;
        font-size: 14px;
        color: var(--url-color);
        /*  #3669c3 */
        margin-top: 1px;
        vertical-align: top;
    }

    .calendar-title .handle li+li {
        margin-left: 18px;
    }

    .calendar-title .handle li.current {
        font-weight: bold;
        color: var(--url-color);
    }

    .calendar-content {
        margin-top: 20px;
    }

    .desig-table-style .calendar-content tbody tr:nth-child(2n) td,
    .desig-table-style .calendar-content thead tr th {
        background-color: transparent;
    }

    .calendar-content table {
        width: 100%;
        height: 280px;
    }

    .calendar-content table th,
    .calendar-content table td {
        text-align: center;
        height: 30px;
    }

    .calendar-content table th {
        color: var(--home-cal-week-color);
        font-weight: bold;
        cursor: default;
    }

    .calendar-content table td .date {
        position: relative;
        width: 30px;
        height: 30px;
        line-height: 30px;
        border-radius: 8px;
        margin: auto;
        user-select: none;
    }

    .calendar-content table td .date:before {
        display: none;
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 1px;
        z-index: 2;
        width: 5px;
        height: 5px;
        margin: 0 auto;
        border-radius: 50%;
        cursor: pointer;
    }

    .calendar-content table td .date.current-month-date {
        /* rgba(255, 255, 255, 0.6) */
        color: var(--home-cal-currmonth-day-color);
    }

    .calendar-content table td .date.prev-month-date,
    .calendar-content table td .date.next-month-date {
        color: var(--home-cal-nocurrmonth-day-color);
        /* color: rgba(255, 255, 255, 0.2); */
    }

    .calendar-content table td .date.focus,
    .calendar-content table td .date:hover {
        background-color: var(--home-cal-hastask-day-color);
        /* box-shadow: 0 8px 24px 0 rgba(54, 105, 195, 0.5) !important; */
        color: var(--home-cal-active-day-color);
    }

    .calendar-content table td .date.value {
        display: block;
        border: 1px solid var(--home-cal-hastask-day-color);
        color: var(--home-cal-hastask-day-color);
    }

    .calendar-content table td .date.value.today {
        font-weight: bold;
    }

    .calendar-content table td .date.value.focus,
    .calendar-content table td .date.value:hover {
        color: var(--home-cal-active-day-color);
    }

    .task-list {
        position: relative;
        margin: 20px 15px;
        flex: auto;
        overflow: hidden auto;
		min-height:300px;
		max-height: 40vh;
    }

    .task-item {
        position: relative;
        padding: 10px;
        background: var(--home-task-bgcolor);
        border-radius: 8px 8px 8px 8px;
        margin-bottom: 10px;
        /* cursor: pointer; */
    }

    .task-item:hover {
        background: var(--home-task-hover-bgcolor);
    }

    .task-item-icon {
        flex: none;
        width: 48px;
        height: 48px;
        margin-right: 10px;
        border-radius: 50%;
    }

    .task-item-info {
        flex: auto;
        width: 0;
    }

    .task-item-name {
        display: block;
        max-width: 80%;
        color: var(--home-task-title-color);
        font-size: 16px;
    }

    .task-item-time {
        display: block;
        max-width: 95%;
        color: var(--home-task-time-color);
    }

    .task-item-status {
        position: absolute;
        right: 0;
        top: 0;
        padding: 2px 6px;
        font-size: 12px;
        border-radius: 0 8px 0 8px;
        color: #fff;
    }

	.drill {
        /* background: #12a3a7; */
        /* background: var(--home-drill-left-bgcolor);
         */
        background: var(--home-drill-chart-color);
    }

    .compete {
        /* background: #307ced; */
        background: var(--home-compete-chart-color);
    }

    .train {
        /* background: #ae453d; */
        background: var(--home-train-chart-color);
    }

    .exam {
        /* background: #bb8237; */
        background: var(--home-exam-chart-color);
    }

    .wait {
        background: var(--status-pre);
    }

    .process {
        background: var(--status-ing);
    }

    .pause {
        background: var(--status-suspend);
    }

    .end {
        background: var(--status-deling);
    }

    /*calendar*/
    .dark-bg {
        background-color: var(--card-body-bgcolor) !important;
		border-radius:8px;
    }

    .middle-content-wrap {
        padding: 0 30px 0 0;
    }

	/* 右侧日历 */

	.home-task {
		background-color: #fff;
		width: 100%;
		border-radius: 8px;
		/* height: 100%; */
		/* position: relative; */
		/* top: -20px; */
		/*transform: translateY(-20px);*/
	}
/*
	.home-task .userName {
		height: 250px;
		background: url(../../assets/mainImage/userName2.png) no-repeat center center;
		background-size: 100% 100%;
	} */

	.userName .outlogin {
		padding-right: 20px;
		padding-top: 24px;
		color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.noticelistbox {
		position: relative;
		padding: 0 20px;
		margin-top: 20px;
		overflow: auto;
		padding-bottom: 10px;
		overflow-x: hidden;
	}

	.noticelistbox .noticelist {
		min-height: 300px;
	}

	.noticeContent /deep/ img {
		max-width: 100%;
	}

	.listNoticeContent /deep/ img {
		max-height: 22px;
	}
	.listNoticeContent .new {
		position: absolute;
		line-height: 17px;
		top: 2px;
		background: #1563C2;
		border-radius: 2px 2px 2px 2px;
		color: var(--default-color);
		padding: 0 2px;
		margin-right:2px;
		font-size: 12px;
	}
	.page {
		display: flex;
		justify-content: center;
	}

	/deep/ .page .mini {
		margin: auto;
	}

	.listContend {
		position: relative;
		display: flex;
		padding-bottom: 20px;
		border-bottom: 1px dashed var(--home-task-bgcolor);
		justify-content: space-between;
		background: var(--home-task-bgcolor);
		border-radius: 8px 8px 8px 8px;
		padding: 10px;
		margin-bottom: 10px;
	}

	.imgstate {
		width: 30%;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-right: 20px;
	}

	.imgstate div {
		margin-top: 16px;
		color: #000;
	}

	.listRigth {
		width: 100%;
	}

	.listRigth>div {
		/* width: 280px; */
		display: flex;
		margin-top: 10px;
		/* font-weight: 600; */
	}

	.listRigth>div span {
		color: var(--default-color);
		margin-right: 20px;
		white-space: nowrap
	}

	.listRigth>div div {
		/* width: 160px; */
		color: var(--default-color-level2);
		/* font-size: 16px; */
		/* margin-right: 20px; */
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.listRigth>div:first-child div{
		font-weight: bold;
	}
	.listRigth>div div img {
		position: absolute;
		top: 0;
		right: 0px;
	}

	.out {
		cursor: pointer;
	}

	.userimg {
		width: 100px;
		min-height: 100px;
		margin: auto;
		margin-top: 14px;
	}

	.userimg img,
	.imgbox {
		width: 100px;
		height: 100px;
		border-radius: 50px;
		border: 1px #fff solid;
	}

	.imgbox {
		display: flex;
		align-items: center;
	}

	.userimg div {
		color: #fff;
		font-size: 14px;
		text-align: center;
		font-weight: 600;
		margin-top: 14px;
	}

	.userName .boardPoptip {
		cursor: pointer;
		transform: translateX(-10px);
	}

	/deep/.userName .boardPoptip .ivu-poptip-body {
		padding: 0px;
	}

	.filter {
		padding: 0 20px;
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.right-circul {
		width: 10px;
		height: 20px;
		background-color: rgb(244, 247, 255);
		border-radius: 0 10px 10px 0;
	}

	.left-circul {
		width: 10px;
		height: 20px;
		background-color: rgb(244, 247, 255);
		border-radius: 10px 0 0 10px;
		float: right;
	}

	.calendar-wrap {
		width: 100%;
		box-sizing: border-box;
		padding: 30px;
		height: 465px;
	}

	.calendar-week {
		margin: 0 auto;
		border-radius: 20px;
		background-color: rgb(244, 247, 255);
		display: flex;
		justify-content: flex-start;
	}

	.week-item {
		width: 14.2857142%;
		height: 30px;
		line-height: 30px;
		text-align: center;
		color: rgb(47, 112, 255);
	}

	.calendar-view {
		margin: 0 auto;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.calendar-view:after {
		display: block;
		clear: both;
		content: '';
	}

	.date-li {
		width: 14.2857142%;
		height: 30px;
		cursor: pointer;
		text-align: center;
		margin-top: 20px;
	}

	.date-view {
		width: 30px;
		height: 30px;
		line-height: 30px;
		border-radius: 50%;
		margin: 0 auto;
		position: relative;
	}

	.opacity-class {
		opacity: .5;
	}

	.todayBg {
		border: 2px solid rgb(47, 112, 255);
	}

	.handleDay {
		background: rgb(47, 112, 255) !important;
		color: #fff;
	}

	.date-mouth-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 10px 0 20px 0;
	}

	.date-mouth {
		display: flex;
		justify-content: center;
		flex-direction: column;
		margin: 0 30px;
	}

	.task-wrap {
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		position: relative;
	}


	.task-exam-name {
		cursor: pointer;
	}

	.task-exam-name:hover {
		color: rgb(47, 112, 255);
	}

	.defGraphWrap-nodata {
		width: 200px;
		height: 126px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		/* margin-left: -72px;
		margin-top: -63px; */
	}

	.defGraph {
		margin-left: 10px;
		height: 126px;
		width: 157px;
		background: url("../../assets/mainImage/defGraph.png") no-repeat center center;
		background-size: 157px 126px;
	}

	.graphText {
		color: #888;
		font-size: 14px;
		text-align: center;
		margin-top: 20px;
	}
	.table-content{
		padding-left: 20px;
		color: var(--url-color) !important;;
		cursor: pointer;
	}
	.hp100 {
        height: 100%;
    }

    .flex {
        display: flex;
        align-items: center;
    }

    .flex-column {
        display: flex;
        flex-direction: column;
    }

    .flex-center {
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
<style scoped>
	#homer_Middle /deep/.ivu-tabs-tabpane {
		min-height: 418px;
		position: relative;
	}

	#flagDiv .g2-legend {
		top: 0px!important;
		margin-top: 0px!important;
	}
	.g2-tooltip{
		background-color: var(--echart-tip-bgcolor) !important;
		border-color: var(--echart-tip-bgcolor) !important;
		color:var(--default-color) !important;
	}
	/* /deep/ .ivu-select-visible .ivu-select-selection {
        border-color: #3a3ad1!important;
        outline: 0;
        box-shadow: 0px 0px 4px rgb(167, 153, 218);
    }
/deep/ .ivu-select-selection {
        border-color: #3a3ad1;
    }
    /deep/ .ivu-select-selection:hover {
        border-color: #3a3ad1;
    }
/deep/ .ivu-select-single .ivu-select-selection .ivu-select-placeholder,.ivu-select-selected-value {
        color: #3a3ad1!important;
    }
    /deep/ .ivu-select-item-selected, .ivu-select-item-selected:hover {
        color: #3a3ad1;
    }
    /deep/ .ivu-select-arrow{
        color: #3a3ad1;
    } */
</style>
